以下用于生成Google折线图的代码在分配2个值(日期和平均值)的情况下可以正常工作。当我添加更多数据(包括如下所示的“模式”和“方差”)时,它仅显示原始数据(“日期”和“均值”)。其他数据不显示。我在这里做错了什么?请。我仍在学习Google图表。任何帮助将不胜感激。谢谢。
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
Whitehat的建议:
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$con = new mysqli($servername, $username, $password, $dbname);
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
else
{
);
}
$query = "SELECT Date, Mean, Mode, Variance FROM datatb";
$aresult = $con->query($query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Data</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Mode');
data.addColumn('number', 'Variance');
var data = google.visualization.arrayToDataTable([
['Date','Mean','Mode','Variance'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
}
?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);
var options = {
title: 'Data',
hAxis : {textStyle : {fontSize: 8}},
'tooltip' : { trigger: 'none'},
enableInteractivity: false,
width: '100%',
height: '700',
chartArea:{
left:10,
top: 100,
width: '100%',
height: '450',
},
pointSize:4,
vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' },
annotations: { stemColor: 'white', textStyle: { fontSize: 11 } },
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 2500px; height: 600px"></div>
</body>
</html>
答案 0 :(得分:1)
更正echo
语句后,只需向视图中添加列...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, 3]);
或者如果您希望所有人都具有注释...
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}, 2, {
calc: 'stringify',
sourceColumn: 2,
type: 'string',
role: 'annotation'
}, 3, {
calc: 'stringify',
sourceColumn: 3,
type: 'string',
role: 'annotation'
}, ]);