javascript 从两个数组创建 Google Chart 数据表数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15869232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create Google Chart data table array from two arrays
提问by Rob
I'm trying to use Google's chart api: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
我正在尝试使用 Google 的图表 api：https: //google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
I have two arrays that I'd like to use to generate and label the visualization. However, I can't find a way to combine and convert these arrays into the proper object structure.
我有两个数组，我想用它们来生成和标记可视化。但是，我找不到将这些数组组合并转换为正确对象结构的方法。
My arrays are the following and their contents are next to them:
我的数组如下，它们的内容在它们旁边：
years; // 2014,2015,2020,2021
sales; // 100,100,200,100
I need to dynamically use these arrays to form this object, which is in the format that Google's API uses:
我需要动态地使用这些数组来形成这个对象，它的格式是 Google 的 API 使用的格式：
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2014', 100],
['2015', 100],
['2020', 200],
['2021', 100]
]);
Thank you for any help.
感谢您的任何帮助。
回答by jmac
You should use addColumnand addRowin a for loop to go through your arrays.
您应该在 for 循环中使用addColumn和addRow来遍历您的数组。
Here is a sample:
这是一个示例：
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, {});
}
回答by Dhiren
Below is complete code with data filling separated.
下面是数据填充分离的完整代码。
<?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");
?>
