问题描述
|
我想创建一个折线图。目前我的图看起来像这样
数据是实时数据,因此图表应从上午9点开始,并沿x轴增加到下午4点
当用户在中午12点生成图表时。
我的预期结果是(注意:数据仅在12 PM之前可用。)
我找不到生成上述部分图表的方法。任何想法?
解决方法
我希望我已经正确理解了。注释中的代码是数据的其余部分(从12pm到4pm)。没有此数据,图形将显示您需要的局部图形。
<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(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(\'string\');
data.addColumn(\'number\');
data.addRows(8);
data.setValue(0,\'9AM\');
data.setValue(2,\'11AM\');
data.setValue(4,\'1PM\');
data.setValue(6,\'3PM\');
data.setValue(7,\'4PM\');
data.setValue(0,1,5480); // 9AM
data.setValue(1,5475); // 10AM
data.setValue(2,5490); // 11AM
data.setValue(3,5490); // 12PM
/*
data.setValue(4,5500); // 1PM
data.setValue(5,5490); // 2PM
data.setValue(6,5530); // 3PM
data.setValue(7,5560); // 4PM
*/
var chart =
new google.visualization.AreaChart(document.getElementById(\'chart_div\'));
chart.draw(data,{width: 500,height: 240,vAxis: {minValue: 5460,maxValue: 5560},colors: [\'#76A4FB\'],legend: \'none\'
});
}
</script>
</head>
<body>
<div id=\"chart_div\"></div>
</body>
</html>
我希望这有帮助。
, 您可以使用jqChart jQuery插件。请参阅以下示例:
http://www.jqchart.com/samples/ChartAxes/DateTimeAxis
http://www.jqchart.com/samples/RealTime/LiveData