Google 시각화에 애니메이션 추가 (기둥 형 차트)?

Question

CSS3 애니메이션을 통해 내 Google 그래프를 좀 더 매끄럽게 보이게 만들 수있는 방법에 대한 자료가 있는지 알고 싶었습니다.

일부 CSS3 애니메이션 (http://www.justinaguilar.com/animations/index.html)을보고 내 Google 차트의 열에 "풀업"애니메이션을 구현하고 싶습니다. 각 열에 'pullUp'클래스를 추가해야한다는 것을 이해합니다. 그러나 Javascript를 통해 동적으로 열이 만들어지기 때문에 그럴 수있는 최선의 방법은 아닙니다.

누군가 포인터를 제공하거나 도움을 줄 수 있습니까? 첨부 된 코드는 내 기존 코드와 같습니다 : CodePen Link

어떤 도움을 주실 까? 고맙습니다!

Answer 1

차트는 애니메이션을 즉시 지원합니다. 데이터를 변경할 때 애니메이션이 적용되므로 빈 데이터 세트로 차트를 그려 전체 데이터 세트로 다시 그리면 애니메이션이 적용됩니다.

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Tracker', '1', '2', '3'], 
     ['A', 475, 450, 190], 
     ['B', 300, 290, 20], 
     ['C', 360, 340, 120], 
     ['D', 180, 170, 250] 
    ]); 

    // use a DataView to 0-out all the values in the data set for the initial draw 
    var view = new google.visualization.DataView(data); 
    view.setColumns([0, { 
     type: 'number', 
     label: data.getColumnLabel(1), 
     calc: function() {return 0;} 
    }, { 
     type: 'number', 
     label: data.getColumnLabel(2), 
     calc: function() {return 0;} 
    }, { 
     type: 'number', 
     label: data.getColumnLabel(3), 
     calc: function() {return 0;} 
    }]); 

    // Create and draw the visualization. 


    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 

    var options = { 
     title:"Sub-Region vs Region vs Budget", 
     legend: 'bottom', 
     hAxis: { 
      title: "" 
     }, 
     animation: { 
      duration: 1000 
     }, 
     vAxis: { 
      // set these values to make the initial animation smoother 
      minValue: 0, 
      maxValue: 600 
     } 
    }; 

    var runOnce = google.visualization.events.addListener(chart, 'ready', function() { 
     google.visualization.events.removeListener(runOnce); 
     chart.draw(data, options); 
    }); 

    chart.draw(view, options); 

    // you can handle the resizing here - no need to recreate your data and charts from scratch 
    $(window).resize(function() { 
     chart.draw(data, options); 
    }); 
} 

바이올린 : http://jsfiddle.net/asgallant/bwULk/

Answer 2

업데이트 대답 시작할

애니메이션와 함께 상자를 벗어 "시작 : 진정한"옵션을 선택합니다. 변경 값이 더 이상 필요하지 않습니다

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['Tracker', '1', '2', '3'], 
     ['A', 475, 450, 190], 
     ['B', 300, 290, 20], 
     ['C', 360, 340, 120], 
     ['D', 180, 170, 250] 
    ]); 

    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 

    var options = { 
     title:"Sub-Region vs Region vs Budget", 
     legend: 'bottom', 
     hAxis: { 
      title: "" 
     }, 
     animation: { 
      startup: true, 
      duration: 1000 
     }, 
     vAxis: { 
      // set these values to make the initial animation smoother 
      minValue: 0, 
      maxValue: 600 
     } 
    };  

    chart.draw(data, options); 

$(window).resize(function() { 
     chart.draw(data, options); 
    }); 
} 

업데이트 바이올린 : http://jsfiddle.net/bwULk/132/