谷歌圖表 - 動畫的階梯圖

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

編輯：在谷歌圖表文件，他們說，階梯圖表的該動畫不支持添加行。但我不確定這是否是問題，因爲它在第一個數據集中可以正常工作？

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>