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

2024-05-19 • 问答

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

   <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,new Date(2010,1,1));
        data.setvalue(0,215);
        data.setvalue(0,2,215);

        data.setvalue(1,1));
        data.setvalue(1,213);

        data.setvalue(2,4));
        data.setvalue(2,213);

        data.setvalue(3,8));
        data.setvalue(3,213);


        data.setvalue(4,3,1));
        data.setvalue(4,220);

        data.setvalue(5,4,1));
        data.setvalue(5,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 个人的分数，所以它是一个时间序列数据。这是我的输出目标：

看起来您的想法是正确的，您只需要为第一个系列添加值即可。

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

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

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

data.setValue(1,1));
data.setValue(1,213);  // series 2

data.setValue(2,4));
data.setValue(2,213);  // series 2

data.setValue(3,8));
data.setValue(3,213);  // series 2

data.setValue(4,3,1));
data.setValue(4,220);  // series 2

data.setValue(5,4,1));
data.setValue(5,190);  // series 2

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

data.setValue(1,200);  // series 1
data.setValue(1,200);  // series 1
data.setValue(2,210);  // series 1
data.setValue(3,207);  // series 1
data.setValue(4,177);  // series 1
data.setValue(5,190);  // series 2

编辑

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

setValue(rowIndex,columnIndex,value);

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

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

        data.addRows(9);

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

    data.setValue(0,1));
    data.setValue(0,215);
    data.setValue(0,215);

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

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

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

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

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

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

lty83938477 回答：Google Charts 时间序列中的多个折线图

大家都在问