2013-04-07 46 views
7

Tôi đang cố gắng sử dụng api biểu đồ của Google: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchartTạo Chart mảng bảng dữ liệu Google từ hai mảng

Tôi có hai mảng mà tôi muốn sử dụng để tạo ra và ghi nhãn trực quan. Tuy nhiên, tôi không thể tìm cách kết hợp và chuyển đổi các mảng này thành cấu trúc đối tượng thích hợp.

mảng của tôi như sau và nội dung của họ là bên cạnh chúng:

years; // 2014,2015,2020,2021 
sales; // 100,100,200,100 

tôi cần phải tự động sử dụng các mảng để tạo thành đối tượng này, mà là ở định dạng mà API của Google sử dụng:

var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales'], 
      ['2014', 100], 
      ['2015', 100], 
      ['2020', 200], 
      ['2021', 100] 
     ]); 

Cảm ơn bạn đã được trợ giúp.

Trả lời

18

Bạn nên sử dụng addColumnaddRow trong vòng lặp for để xem qua các mảng của mình.

Đây là một mẫu:

function drawVisualization() { 
    // Create and populate the data table. 
    var years = ['2001', '2002', '2003', '2004', '2005']; 
    var sales = [1, 2, 3, 4, 5]; 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'years'); 
    data.addColumn('number', 'sales'); 

    for(i = 0; i < years.length; i++) 
    data.addRow([years[i], sales[i]]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {}); 
} 
0

Dưới đây là mã hoàn chỉnh với các dữ liệu điền tách ra.

<?php 

function testing($chartId, $chartFunc, $chartTitle, $xAxisTitle, $chartData, $chartType) 
{ 
$pageMeat =<<<EOD 
<html> 
<head> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback($chartFunc); 
function $chartFunc() { 
var data = google.visualization.arrayToDataTable($chartData); 

var options = { 
title: '$chartTitle', 
hAxis: {title: '$xAxisTitle', titleTextStyle: {color: 'red'}} 
}; 
EOD; 

if($chartType == "line") { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.LineChart(document.getElementById('$chartId')); 
EOD; 
} 
else if($chartType == "pie") { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.PieChart(document.getElementById('$chartId')); 
EOD; 
} 
else { 
$pageMeat .=<<<EOD 
var chart = new google.visualization.ColumnChart(document.getElementById('$chartId')); 
EOD; 
} 
$pageMeat .=<<<EOD 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<div id="$chartId" style="width: 900px; height: 500px;"></div> 
</body> 
</html> 
EOD; 
echo $pageMeat; 
} 

$gChartId = "vertColumns"; 
$gChartFn = "columnChart"; 
$gChartTitle = "Company Performance"; 
$gXAxisTitle = "Year"; 

$gChartData[] = array('Year', 'Sales', 'Expenses'); 
$gChartData[] = array('2004', 1000, 400); 
$gChartData[] = array('2005', 1170, 460); 
$gChartData[] = array('2006', 660, 1120); 
$gChartData[] = array('2007', 1030, 540); 

testing($gChartId, $gChartFn, $gChartTitle, $gXAxisTitle, json_encode($gChartData), "column"); 
?> 
Các vấn đề liên quan