Question

我正在尝试绘制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>

有人知道解决方案吗？

Answer 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>

具有不同数据点的Google Line Chart

1 个答案: