Google 차트 - 계단식 차트의 애니메이션

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

편집 대단히 감사합니다. 하지만 첫 번째 데이터 세트에서 문제가 없으므로 문제는 아닌지 잘 모르겠습니다. 이 두 번째 부분에서, addRows 대신,
을 첫 번째 시리즈
을 null 값을 처리 할 수 ​​interpolateNulls: true을 설정하면 setValue를 사용해보십시오, 수정로

도움이되지 않습니다처럼

Answer 1

보인다 애니메이션의
은 ... 행

가 작업 조각 다음 라인을 수정 볼 것 같다의 첫 번째 세트에서 누락 된 값을 입력합니다

,

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>

당신 Thanky