我想创建一个折线图。目前我的图表看起来像这样

数据是实时的,所以图表应该从上午 9 点开始,并朝着 x 轴增加到下午 4 点
当用户在下午 12 点生成图表时。我的预期结果是(注意:数据仅在下午 12 点之前可用。)

我找不到生成上述部分图表的方法。任何的想法?
我希望我已经正确理解了这一点。注释中的代码是数据的其余部分(从中午 12 点到下午 4 点)。如果没有这些数据,图表将根据您的需要显示部分图表。
<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, 0, '9AM');
data.setValue(2, 0, '11AM');
data.setValue(4, 0, '1PM');
data.setValue(6, 0, '3PM');
data.setValue(7, 0, '4PM');
data.setValue(0, 1, 5480); // 9AM
data.setValue(1, 1, 5475); // 10AM
data.setValue(2, 1, 5490); // 11AM
data.setValue(3, 1, 5490); // 12PM
/*
data.setValue(4, 1, 5500); // 1PM
data.setValue(5, 1, 5490); // 2PM
data.setValue(6, 1, 5530); // 3PM
data.setValue(7, 1, 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>
Run Code Online (Sandbox Code Playgroud)
我希望这有帮助。