具有不同数据点的 Google 折线图答案

【问题标题】：Google Line Chart with varying data points具有不同数据点的 Google 折线图
【发布时间】：2012-02-28 20:10:57
【问题描述】：

我正在尝试绘制 Google 折线图，其中每条线可能有不同数量的数据点。也就是说，如果 x 轴有 10 个值，那么某些行可能只有 4 或 5 或任何点上的数据。我在这里找到了这个问题的答案：

How to create Google Chart with lines (series) of different lengths?

这对我不起作用。我尝试了下划线和双下划线。我还尝试在下划线周围添加“和”。但是当我打开 html 时，该网站仍然是普通的。这是我的代码：

<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', 'point');
        data.addColumn('number', 'line1');
        data.addColumn('number', 'line2');
        data.addColumn('number', 'line3');
        data.addColumn('number', 'line4');
        data.addColumn('number', 'line5');
        data.addRows([
          ['0', 5, 6, 10, 8,_],
          ['1', 5, 6, 10, 8, 10]]);
        var options = {
          title: 'Test'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

有人知道解决方案吗？

【问题讨论】：

标签： google-visualization

【解决方案1】：

我认为答案在此页面上Data Formats。
问题是你不能在数据数组中使用 _ ，因为 JS 会认为它是一个变量。 _ 是缺失值的编码值。因此，您必须将所有数据转换为编码字符串才能使用 _ 来表示缺失值。在链接页面的末尾，您似乎拥有为您实现这种编码的功能。

也许您可以像这样设置数据而不是“内联”方法，因此您不需要使用编码值。

<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', 'point');
    data.addColumn('number', 'line1');
    data.addColumn('number', 'line2');
    data.addColumn('number', 'line3');
    data.addColumn('number', 'line4');
    data.addColumn('number', 'line5');

    data.addRows(3);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(0, 3, 500);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1000);
    data.setValue(1, 2, 400);
    data.setValue(1, 3, 500);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 1000);
    data.setValue(2, 2, 400);


    var options = {
      title: 'Test'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
</head>
 <body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>

【讨论】：

非常感谢您的快速回复！ :)