Google Charts 时间序列中的多折线图

Question

如何制作包含多个折线图的 google 图表。我知道如何在 chartsjs 中做到这一点，但它让我在 google 图表中感到困惑。我的尝试：

   <script>

    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'X');
      data.addColumn('number', 'Person 1');
      data.addColumn('number', 'Person 2');

        data.addRows(9);

        data.setValue(0, 0, new Date(2010, 1, 1));
        data.setValue(0, 1, 215);
        data.setValue(0, 2, 215);

        data.setValue(1, 0, new Date(2010, 2, 1));
        data.setValue(1, 2, 213);

        data.setValue(2, 0, new Date(2010, 2, 4));
        data.setValue(2, 2, 213);

        data.setValue(3, 0, new Date(2010, 2, 8));
        data.setValue(3, 2, 213);


        data.setValue(4, 0, new Date(2010, 3, 1));
        data.setValue(4, 2, 220);

        data.setValue(5, 0, new Date(2010, 4, 1));
        data.setValue(5, 2, 190);

      var options = {
        {#chartArea:{ width:"100%", height:"100%"},#}
        title: "Persons Performance over Time",
        height: 500,
        width: 1300,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Scores'
        },
        series: {
          1: {curveType: 'function'}
        },

      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }


    </script>

不过好像只做了一张折线图。随着时间的推移，我有第 1 个人和第 2 个人的分数，所以它是一个时间序列数据。这是我的输出目标：

Answer 1

看来你的想法是对的，你只需要为第一个系列添加值。

在这里，您已经为两个系列添加了值。

data.setValue(0, 0, new Date(2010, 1, 1));
data.setValue(0, 1, 215);  // series 1
data.setValue(0, 2, 215);  // series 2

但由于它们都在同一个 y 轴值上，因此只有一个可见。
并且不再添加第 1 行的值，因此只绘制了一个点。

data.setValue(1, 0, new Date(2010, 2, 1));
data.setValue(1, 2, 213);  // series 2

data.setValue(2, 0, new Date(2010, 2, 4));
data.setValue(2, 2, 213);  // series 2

data.setValue(3, 0, new Date(2010, 2, 8));
data.setValue(3, 2, 213);  // series 2

data.setValue(4, 0, new Date(2010, 3, 1));
data.setValue(4, 2, 220);  // series 2

data.setValue(5, 0, new Date(2010, 4, 1));
data.setValue(5, 2, 190);  // series 2

要显示系列 1，您需要为数据 table 第 1 列添加值。
所以它需要类似于以下...

data.setValue(1, 0, new Date(2010, 2, 1));
data.setValue(1, 1, 200);  // series 1
data.setValue(1, 2, 213);  // series 2

data.setValue(2, 0, new Date(2010, 2, 4));
data.setValue(2, 1, 200);  // series 1
data.setValue(2, 2, 213);  // series 2

data.setValue(3, 0, new Date(2010, 2, 8));
data.setValue(3, 1, 210);  // series 1
data.setValue(3, 2, 213);  // series 2

data.setValue(4, 0, new Date(2010, 3, 1));
data.setValue(4, 1, 207);  // series 1
data.setValue(4, 2, 220);  // series 2

data.setValue(5, 0, new Date(2010, 4, 1));
data.setValue(5, 1, 177);  // series 1
data.setValue(5, 2, 190);  // series 2

编辑

setValue 方法采用以下参数...

setValue(rowIndex, columnIndex, value);

第一个参数是要更新的数据table中的行索引。
第二个参数是要更新的数据 table 中的列索引。

在这里，您要添加 9 个空行...

        data.addRows(9);

然后需要您返回并单独更新每一行和每一列。

    data.setValue(0, 0, new Date(2010, 1, 1));
    data.setValue(0, 1, 215);
    data.setValue(0, 2, 215);

但是如果您已经有了该行的值，
您可以使用 addRow 方法。

因此，不要添加 9 个空白行，只需一次添加一个行值...

data.addRow([new Date(2010, 1, 1), 215, 215]);

或者如果您的所有数据都是数组形式，
您可以使用 addRows 方法同时添加所有行，
不设置行数...

data.addRows([
  [new Date(2010, 1, 1), 215, 215],
  [new Date(2010, 2, 1), 215, 215],
  [new Date(2010, 3, 1), 215, 215]
]);

Google Charts 时间序列中的多折线图

Google Charts Multiple Line Charts in Time Series

html

javascript

linechart

google-visualization