如何使用Google Visualization API描述日线图？
我试图用以下方式描述每日折线图 谷歌可视化 API。 http://code.google.com/apis/visualization/documentation/reference.html
DataTable 对象是这样的。
[
{date:'3/1', value:'1000'},
{date:'3/2', value:'1500'},
{date:'3/3', value:'1200'},
{date:'3/4', value:'1300'},
{date:'3/5', value:'1400'},
{date:'3/6', value:'1100'},
{date:'3/7', value:'1200'}
]
通过上面的数据，图表显示了一周的记录。
即使缺少一些数据，我也想描述一个周图。
[
{date:'3/1', value:'1000'},
{date:'3/2', value:'1500'},
{date:'3/5', value:'1400'},
{date:'3/7', value:'1200'}
]
我想用上面的数据描述一个周图，这意味着x轴应该有7天，并且 如果没有数据，该行应该是 仅与现有数据连接。
感谢您提供的信息。我尝试了“interpolateNulls”，但没有按我的预期工作。
对于下面的代码，换行符位于 3/2 和 3/4 之间。 我想要连接 3/2-3/4。
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("visualization", "1.0", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]];
dataTable.addRows(data);
var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true};
var chart = new google.visualization.ImageChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
I'm trying to describe daily line chart with
Google Visualization API.
http://code.google.com/apis/visualization/documentation/reference.html
DataTable object is something like this.
[
{date:'3/1', value:'1000'},
{date:'3/2', value:'1500'},
{date:'3/3', value:'1200'},
{date:'3/4', value:'1300'},
{date:'3/5', value:'1400'},
{date:'3/6', value:'1100'},
{date:'3/7', value:'1200'}
]
With the data above, the graph shows a week records.
I want to describe a week chart even when some data lack.
[
{date:'3/1', value:'1000'},
{date:'3/2', value:'1500'},
{date:'3/5', value:'1400'},
{date:'3/7', value:'1200'}
]
I want to describe a week chart with the data above, that means there should be 7 days for x-axis, and
in the case there is no data, the line should be
connected only with existing data.
Thank you for your information. I tried 'interpolateNulls' but doesn't work as I expected.
With the code below, the line break between 3/2 and 3/4.
I want 3/2-3/4 to be connected.
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("visualization", "1.0", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
var data = [['3/1',1000],['3/2',1300],['3/3',null],['3/4',1800],['3/5',900],['3/6',1200],['3/7',1000]];
dataTable.addRows(data);
var options = {cht: 'lc', chds:'0,3000', interpolateNulls: true};
var chart = new google.visualization.ImageChart(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
包括一周中每个日期的条目，并将缺失的值设置为 null。
行字符的配置选项之一是 interpolateNulls。 使用
在您的绘制方法中 。编辑：图表类型必须是 LineChart 而不是 ImageLineChart 才能使 interpolateNulls 工作。
有关配置选项的文档位于此处。
Include an entry for every date of the week and set the value of the missing ones as null.
One of the configuration options for the line char is interpolateNulls. Use
in your draw method. EDIT: The chart type must be a LineChart rather than an ImageLineChart for interpolateNulls to work.
Documentation on the configuration options is here.
在我看来，只需在循环内创建一个控制结构来验证所有值。foreach 值验证它是否为 null。
在你的图表中：
我不测试自己，我希望这有帮助。
In my opnion just create a structure of control inside a loop to verify all values.. foreach value verify if it is null.
In your chart:
I do not test myself, I hope this help.