谷歌图表 - 阶梯图表的动画

Question

我在 Google 图表中为 2 数据集阶梯图制作动画时遇到了这个问题。当它只是一个 LineChart 时，一切都很好，但我的客户希望有 SteppedArea 图表。当我将类型从 LineChart 更改为 SteppedAreaChart 时，第一个数据集的动画还可以，但第二个数据集有些错误，我不知道为什么。你能看看这个代码笔吗？非常感谢

function drawStepChart() {
    var data1 = new google.visualization.DataTable();
    data1.addColumn('number', 'Year');
    data1.addColumn('number', 'One');
    data1.addColumn('number', 'Two');

    var options = {
        animation: {duration: 50},
        areaOpacity: 0
    };

    var stepchart = new google.visualization.SteppedAreaChart(document.getElementById('step'));

    var index = 0;
    var index2 = 0;
    var animate1 = function() {
        if (index < values[1].length) {
            data1.addRows([values[1][index]]);
            stepchart.draw(data1, options);
            index++;
        } else {
            if(index2 < values[0].length) {
                data1.addRows([values[0][index2]]);
                stepchart.draw(data1, options);
                index2++;
            }                
        }
    }
    google.visualization.events.addListener(stepchart, 'animationfinish', animate1);
    stepchart.draw(data1, options);
    animate1();
}       

Codepen

编辑：在谷歌图表文档中，他们说，阶梯图表的动画不支持添加行。但我不确定这是否是问题所在，因为它在第一个数据集中可以正常工作？

Answer 1

看起来它无法处理第一个系列的 null 值，
并且设置interpolateNulls: true 没有帮助

作为修复，请尝试使用setValue，而不是addRows，
在动画的第二部分
填写第一组行的缺失值

似乎修复了这条线，请参阅下面的工作 sn-p...

google.charts.load("current", {
  callback: function () {
    drawLineChart();
    drawStepChart();
  },
  packages: ["corechart", "table"]
});

// two sets of values
var values = [
  [
    [1, 1.22, null],
    [2, 1.22, null],
    [3, 1.22, null],
    [4, 1.22, null],
    [5, 1.22, null],
    [6, 1.55, null],
    [7, 1.55, null],
    [8, 1.55, null],
    [9, 1.90, null],
    [10, 1.90, null]
  ],
  [
    [1, null, 2.11],
    [2, null, 2.11],
    [3, null, 2.11],
    [4, null, 0.80],
    [5, null, 0.80],
    [6, null, 0.80],
    [7, null, 0.80],
    [8, null, 1.00],
    [9, null, 2.10],
    [10, null, 2.10]
  ]
];

function drawLineChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn("number", "Year");
  data1.addColumn("number", "One");
  data1.addColumn("number", "Two");

  var options = {
    animation: { duration: 50 }
  };

  var linechart = new google.visualization.LineChart(
    document.getElementById("line")
  );

  var index = 0;
  var index2 = 0;
  var animate1 = function() {
    if (index < values[1].length) {
      data1.addRows([values[1][index]]);
      linechart.draw(data1, options);
      index++;
    } else {
      if (index2 < values[0].length) {
        data1.addRows([values[0][index2]]);
        linechart.draw(data1, options);
        index2++;
      }
    }
  };
  google.visualization.events.addListener(
    linechart,
    "animationfinish",
    animate1
  );
  linechart.draw(data1, options);
  animate1();
}

function drawStepChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn("number", "Year");
  data1.addColumn("number", "One");
  data1.addColumn("number", "Two");

  var options = {
    animation: { duration: 50 },
    areaOpacity: 0
  };

  var stepchart = new google.visualization.SteppedAreaChart(
    document.getElementById("step")
  );

  var index = 0;
  var index2 = 0;
  var animate1 = function() {
    if (index < values[1].length) {
      data1.addRows([values[1][index]]);
      stepchart.draw(data1, options);
      index++;
    } else {
      if (index2 < values[0].length) {
        data1.setValue(index2, 1, values[0][index2][1]);
        stepchart.draw(data1, options);
        index2++;
      }
    }
  };
  google.visualization.events.addListener(
    stepchart,
    "animationfinish",
    animate1
  );
  stepchart.draw(data1, options);
  animate1();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line"></div>
<div id="step"></div>