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

我在谷歌图表中设置2数据集阶梯图的动画时遇到了这个问题。当它只是一个折线图时，一切都很好，但我的客户希望有一个图表。当我将类型从LineChart更改为SteppedArachart时，第一个数据集的动画是可以的，但第二个数据集有点错误，我无法理解原因。你能看看这支密码笔吗？多谢各位

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();
}       

函数drawStepChart（）{
var data1=新的google.visualization.DataTable（）；
数据1.addColumn（“数字”、“年份”）；
data1.addColumn（'number'，'One'）；
data1.addColumn（'number'，'Two'）；
变量选项={
动画：{持续时间：50}，
面积不透明度：0
};
var stepchart=new google.visualization.stepedareachart（document.getElementById（'step'）；
var指数=0；
var index2=0；
var animate1=函数（）{
if（索引<值[1]。长度）{
data1.addRows（[values[1][index]]）；
步骤图绘制（数据1，选项）；
索引++；
}否则{
if（index2<值[0]。长度）{
data1.addRows（[values[0][index2]]）；
步骤图绘制（数据1，选项）；
index2++；
}                
}
}
google.visualization.events.addListener（步骤图'animationfinish'，animate1）；
步骤图绘制（数据1，选项）；
动画1（）；
}       

---

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

看起来它无法处理第一个系列的

null

值，
设置

interpolutenulls:true

也没有帮助

作为修复，请尝试使用

setValue

，而不是

addRows

，
在动画的第二部分
填写第一组行上缺少的值

似乎要修复该行，请参阅以下工作片段

google.charts.load（“当前”{
回调：函数（）{
绘图线图（）；
drawStepChart（）；
},
包装：[“corechart”，“table”]
});
//两组值
var值=[
[
[1,1.22，空]，
[2,1.22，空]，
[3,1.22，空]，
[4,1.22，空]，
[5,1.22，空]，
[6,1.55，空]，
[7,1.55，空]，
[8,1.55，空]，
[9,1.90，空]，
[10,1.90，空]
],
[
[1，null，2.11]，
[2，null，2.11]，
[3，空，2.11]，
[4，null，0.80]，
[5，null，0.80]，
[6，null，0.80]，
[7，空，0.80]，
[8，空，1.00]，
[9，空，2.10]，
[10，空，2.10]
]
];
函数drawLineChart（）{
var data1=新的google.visualization.DataTable（）；
数据1.添加列（“编号”、“年份”）；
数据1.添加列（“编号”、“一”）；
数据1.添加列（“数字”、“两”）；
变量选项={
动画：{持续时间：50}
};
var linechart=new google.visualization.linechart(
document.getElementById（“行”）
);
var指数=0；
var index2=0；
var animate1=函数（）{
if（索引<值[1]。长度）{
data1.addRows（[values[1][index]]）；
折线图绘制（数据1，选项）；
索引++；
}否则{
if（index2<值[0]。长度）{
data1.addRows（[values[0][index2]]）；
折线图绘制（数据1，选项）；
index2++；
}
}
};
google.visualization.events.addListener(
线条图，
“动画完成”，
动画1
);
折线图绘制（数据1，选项）；
动画1（）；
}
函数drawStepChart（）{
var data1=新的google.visualization.DataTable（）；
数据1.添加列（“编号”、“年份”）；
数据1.添加列（“编号”、“一”）；
数据1.添加列（“数字”、“两”）；
变量选项={
动画：{持续时间：50}，
面积不透明度：0
};
var stepchart=new google.visualization.SteppedAreaChart(
document.getElementById（“步骤”）
);
var指数=0；
var index2=0；
var animate1=函数（）{
if（索引<值[1]。长度）{
data1.addRows（[values[1][index]]）；
步骤图绘制（数据1，选项）；
索引++；
}否则{
if（index2<值[0]。长度）{
data1.setValue（index2，1，值[0][index2][1]）；
步骤图绘制（数据1，选项）；
index2++；
}
}
};
google.visualization.events.addListener(
步骤图，
“动画完成”，
动画1
);
步骤图绘制（数据1，选项）；
动画1（）；
}

---

谢谢！你救了我一天！