谷歌圖表 - 階梯圖的動畫

Question

我有這個問題與動畫的2數據集谷歌圖表中的步進圖。 當它只是一個LineChart時它一切都很好，但我的客戶希望有SteppedArea圖表。 當我將類型從LineChart更改為SteppedAreaChart時，第一個數據集的動畫是OK，但第二個數據集有些錯誤，我無法弄清楚原因。 你能看看這支代碼筆嗎？ 非常感謝你

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

編輯：他們說，在Google Charts文檔中，階梯圖的動畫不支持添加行。 但我不確定這是問題，因為它在第一個數據集中正常工作？

Answer 1

看起來它無法處理第一個系列的null值，
並設置interpolateNulls: true沒有幫助

作為修復，嘗試使用setValue而不是addRows ，
在動畫的第二部分
填寫第一組行的缺失值

似乎修復了這條線，看下面的工作片段......

 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>