Javascript 谷歌图表添加到图表的第二行
在谷歌图表中，我创建了一个折线图来显示运行/失败之间的关系。下面的代码仅用于绘制折线图的第一部分，即“运行”，而忽略了“失败”列。由于我没有硬编码我的数据，我不知道如何使用谷歌图表文档中的例子，发现 --这表明它们使用了.addcolumn（）和.addrows（），但不确定在何处实现 --当我在chrome上查看开发人员控制台时，没有任何东西表明有错误 如果有人做过这样的事情，能给我指出正确的方向，那将是非常棒的Javascript 谷歌图表添加到图表的第二行,javascript,php,google-visualization,Javascript,Php,Google Visualization,在谷歌图表中，我创建了一个折线图来显示运行/失败之间的关系。下面的代码仅用于绘制折线图的第一部分，即“运行”，而忽略了“失败”列。由于我没有硬编码我的数据，我不知道如何使用谷歌图表文档中的例子，发现 --这表明它们使用了.addcolumn（）和.addrows（），但不确定在何处实现 --当我在chrome上查看开发人员控制台时，没有任何东西表明有错误 如果有人做过这样的事情，能给我指出正确的方向，那将是非常棒的 <!DOCTYPE html> <html> <h
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Name', 'RunDate', 'Runs', 'Fails'],
<?php
$dbName = "my_test";
$config = parse_ini_file("myconfig.ini",true);
$dbUser = $config["DB"]["db_user"];
$dbServer = $config["DB"]["db_ip"];
$dbPassword = $config["DB"]["db_pass"];
$con = mysql_connect($dbServer, $dbUser, $dbPassword);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($dbName, $con);
$sql = mysql_query("select * from GraphTest");
$output = array();
while($row = mysql_fetch_array($sql)) {
// create a temp array to hold the data
$temp = array();
// add the data
$temp[] = '"' . $row['Name'] . '"';
$temp[] = '"' . $row['RunDate'] . '"';
$temp[] = (int) $row['Runs'];
$temp[] = (int) $row['Fails'];
// implode the temp array into a comma-separated list and add to the output array
$output[] = '[' . implode(', ', $temp) . ']';
}
// implode the output into a comma-newline separated list and echo
echo implode(",\n", $output);
mysql_close($con);
?>
]);
// parse the data table for a list of locations
var locations = google.visualization.data.group(data, [0], []);
// build an array of data column definitions
var columns = [1];
for (var i = 0; i < locations.getNumberOfRows(); i++) {
var loc = locations.getValue(i, 0);
columns.push({
label: loc,
type: 'number',
calc: function (dt, row) {
// include data in this column only if the location matches
return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
}
});
}
// create a DataView based on the DataTable to get the correct snapshot of the data for the chart
var view = new google.visualization.DataView(data);
// set the columns in the view to the columns we constructed above
view.setColumns(columns);
var options = {
title: 'data test',
curveType: 'function'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
// draw the chart using the DataView instead of the DataTable
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Name'，'RunDate'，'Runs'，'Fails']，
为数据视图构建列数组时，
Fails列从未被引用，仅运行
从calc
功能中
// only Runs, column 2 is used
return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
若要从中获取数据，请添加另一列
// Runs
columns.push({
label: loc,
type: 'number',
calc: function (dt, row) {
// include data in this column only if the location matches
return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 2) : null;
}
});
// Fails
columns.push({
label: loc,
type: 'number',
calc: function (dt, row) {
// include data in this column only if the location matches
return (dt.getValue(row, 0) == loc) ? dt.getValue(row, 3) : null;
}
});
请参阅以下工作片段
google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Name'，'RunDate'，'Runs'，'Fails']，
[A'，2018-05-10'，5000，6000]，
[A'，2018-05-11'，60005000]，
[A'，2018-05-12'，7000，6000]，
[A'，2018-05-13'，8000，5000]，
[A'，2018-05-14'，9000，6000]，
]);
var locations=google.visualization.data.group（数据，[0]，]）；
var列=[1]；
对于（var i=0；i