当某些值缺失时，如何绘制Google Line Charts？ [英] How to draw Google Line Charts when some of the values are missing?
问题描述
我在。
这是一个工作示例。
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp：// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1.1'，{packages：['corechart'，'imagelinechart']}）;
< / script>
< script type =text / javascript>
function drawVisualization（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Year'）;
data.addColumn（'number'，'Sales'）;
data.addColumn（'number'，'Expenses'）;
data.addRows（4）;
data.setValue（0，0，'2004'）;
data.setValue（0，1，1000）;
data.setValue（0，2，400）;
data.setValue（1，0，'2005'）;
//data.setValue(1，1，1170）; // sales for 2005
data.setValue（1，2，460）;
data.setValue（2，0，'2006'）;
data.setValue（2，1，860）;
data.setValue（2，2，580）;
data.setValue（3，0，'2007'）;
data.setValue（3，1，1030）;
data.setValue（3，2，540）;
var chart = new google.visualization.LineChart（document.getElementById（'visualization'））;
chart.draw（data，{width：500，height：250，min：0，interpolateNulls：true}）;
}
google.setOnLoadCallback（drawVisualization）;
< / script>
< / head>
< body>
< div id =visualizationstyle =width：600px; height：400px;>< / div>
< / body>
< / html>
I've found the following JavaScript code on Google Chart Tools:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170); // sales for 2005
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
chart.draw(data, {width: 500, height: 250, min: 0});
}
If I comment out the line of code setting the value for the 2005 sales, the Sales line will appear on the graph starting from 2006 and ending in 2007. I was expecting to see the Sales line from 2004 (at Y=1000) to 2006 (at Y=860) and from 2006 (at Y=860) to 2007 (at Y=1030).
How do I draw that chart if I don't have the value for the 2005 sales, but I have the values for 2004, 2006 and 2007?
Actual result:
Expected result: (I added the value 930 for the 2005 sales only to show what I want to accomplish; I hope there's a better way of doing this without computing all the missing Y values for all the series)
If it's possible for you to use the javascript version of this chart, then you can achieve something like what you want by using the interpolateNulls option available through the line chart options.
Here's a working example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart', 'imagelinechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
//data.setValue(1, 1, 1170); // sales for 2005
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(2, 2, 580);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {width: 500, height: 250, min: 0, interpolateNulls: true});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
这篇关于当某些值缺失时，如何绘制Google Line Charts？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
