Googleグラフ - 階段状チャートのアニメーション

Question

Google Chartsで2データセット階段グラフのアニメーション化でこの問題が発生しました。それはLineChartだけでうまくいきましたが、私のクライアントはSteppedAreaチャートを持っていたいと思います。 LineChartからSteppedAreaChartに型を変更すると、最初のデータセットのアニメーションはOKですが、2番目のデータセットは多少間違っています。理由を理解できません。このコードペンを見ていただけますか？ Googleのチャートのドキュメントで、彼らが言う、ステップチャートのアニメーションは、行を追加することはできません：

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

EDITありがとうございました。しかし、それは最初のデータセットで問題なく動作するので、それが問題なのかどうかはわかりません。

Answer 1

、それは最初のシリーズのnull値を扱うことができないように、見え
とinterpolateNulls: trueを設定すると、第二部では代わりにaddRows、
の、setValueを使用してみてください、修正として

を助けていません行の最初のセットに欠損値を埋めるためのアニメーション

...作業スニペット以下参照、行を修正しているようだがあなたThanky

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>