Charts 使用包含部分数据的google图表api创建图表
我想创建一个折线图。目前我的图表是这样的 数据是实时的，因此图表应在上午9点开始，并向x轴增加至下午4点 当用户在下午12点生成图表时。 我的预期结果是（注：数据仅在下午12点之前可用。）Charts 使用包含部分数据的google图表api创建图表,charts,Charts,我想创建一个折线图。目前我的图表是这样的 数据是实时的，因此图表应在上午9点开始，并向x轴增加至下午4点 当用户在下午12点生成图表时。 我的预期结果是（注：数据仅在下午12点之前可用。） 我找不到生成上述部分图表的方法。有什么想法吗？我希望我理解正确。注释中的代码是数据的剩余部分（从中午12点到下午4点）。如果没有这些数据，图形将根据需要显示局部图形 <html> <head> <script type="text/javascript" src=
我找不到生成上述部分图表的方法。有什么想法吗？我希望我理解正确。注释中的代码是数据的剩余部分（从中午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>
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'）；
data.addColumn（'number'）；
数据。添加行（8）；
数据设置值（0,0，'9AM'）；
设置值（2,0，'11AM'）；
数据设置值（4,0，'1PM'）；
设置值（6,0，'3PM'）；
数据设置值（7,0，'4PM'）；
data.setValue（0,15480）；//上午9点
data.setValue（1,15475）；//上午10点
data.setValue（2,15490）；//11AM
data.setValue（3,15490）；//12PM
/*
data.setValue（4,1550）；//1PM
data.setValue（5,15490）；//下午2点
data.setValue（6,15530）；//下午3点
data.setValue（7,15560）；//下午4点
*/
var图表=
新的google.visualization.AreaChart（document.getElementById（'chart_div'）；
绘制图表（数据，{宽度：500，高度：240，
变量：{minValue:5460，maxValue:5560}，
颜色：['#76A4FB']，
图例：“无”
});
}
我希望这有帮助。您可以使用jqChart jQuery插件。请参见以下示例：
如果x的时间只有12点，为什么需要几个小时到下午4点？只需获取当前时间（整小时）并将其用作x轴的最大值。这样你就有了当前小时的完整图表。如果用户在中午加载页面，图表将显示数据到中午，否则直到一天结束。如果您需要在下午4点切割x轴上的时间值，您可以添加条件，该条件将使用当前时间，或者在下午4点之后但不到次日上午9点的情况下使用下午4点。这是客户的要求。我已经按照您在这里描述的方式显示了图表。客户希望这样做…我如何为每小时添加4个数据行？我需要每15分钟更新一次。要每15分钟捕获9-4行数据，需要30行数据（而不是8行）。如果您想要每小时X轴标签，您需要将它们设置在以下行：0,6,10,14,18,22,26,30谢谢您的回答，这为我指明了方向：显式设置
minValuemaxValuehAxis