使用带有部分数据的google图表api创建图表
问题描述:
我想创建折线图。目前我的图形看起来像这样使用带有部分数据的google图表api创建图表
的数据是实时所以图表应该在上午09点开始,朝向x轴增加高达16:00
当用户在下午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>
我希望这有助于。
为什么你需要个小时,直到下午4点x如果这只是中午12点?只需获取当前时间(整小时)并将其用作x轴的最高值。这样你就可以获得当前小时的完整图表。如果用户在中午加载页面,图表将显示直到中午的数据,否则直到一天结束。如果您需要在下午4点在x轴上缩短时间值,则可以添加将使用当前时间或下午4点的条件,如果是在下午4点以后,但不到第二天上午9点。 – 2011-05-31 21:55:05
这是客户的要求。我已经按照你在这里描述的方式显示图表。客户希望以这种方式... – Manjoor 2011-06-14 15:23:25