我在Google Chart Tools上找到了以下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.ImageLineChart(document.getElementById('visualization'));
chart.draw(data, {width: 500, height: 250, min: 0});
}
如果我注释掉为2005年销售设置值的代码行，则Sales行将出现在图表中，从2006年开始到2007年结束。我期望看到2004年(Y = 1000)到2006年的Sales行(Y = 860)和2006(Y = 860)至2007(Y = 1030)。
如果我没有2005年销售的值(value)，但我有2004年，2006年和2007年的值(value)，如何绘制该图表？
实际结果:
预期结果:(我为2005年的销售添加了值930，只是为了显示我想要达成的目标；我希望有一种更好的方法，而无需计算所有系列的所有缺失Y值)
最佳答案
如果可以使用此图表的javascript版本，则可以使用line chart options提供的interpolateNulls选项来实现所需的功能。
这是一个工作示例。
<!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>
关于charts - 缺少某些值时如何绘制Google折线图？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6859298/