Как мне настроить диаграммы Google?

Question

В тегах сценариев я добавил следующий код, и я не могу его анимировать. любезно suugest

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
    ]); 

    var options = { 
     title: 'Company Performance', 
     animation: { 
      duration: 1000, 
      easing: 'out' 
     }, 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
    }; 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 

диаграмма загружается, но я не могу ее анимировать. анимация во время загрузки

Answer 1

Вы увидите анимацию, когда вы что-то измените в своих данных. Измените код на что-то вроде этого:

... 
    chart.draw(data, options); 

    setTimeout(function() { 
     data.setValue(0, 2, 1000); 
     chart.draw(data, options); 
    }, 3000); 

и стоимость 400 будет изменена на 1000 с анимацией.

Проверьте этот документ about animation за некоторые подсказки.

Update: Кажется, что нет анимации на нагрузке, но вы можете подделать его, как эту нагрузку всех нулей на самом начало, а затем перерисовках с реальными данными:

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 0,  0], 
    ['2005', 0,  0], 
    ['2006', 0,  0], 
    ['2007', 0,  0] 
]); 

var options = { 
    title: 'Company Performance', 
    animation: { 
     duration: 1000, 
     easing: 'out' 
    }, 
    vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, minValue:0, maxValue:1000} 
}; 
var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
chart.draw(data, options); 

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', 'Expenses'], 
    ['2004', 1000,  400], 
    ['2005', 1170,  460], 
    ['2006', 660,  1120], 
    ['2007', 1030,  540] 
]); 
chart.draw(data, options); 

Answer 2

анимировать при загрузке, добавьте startup: true к вашим возможностям анимации (см. documentation). нет Полный код:

  animation: { 
      duration: 1000, 
      easing: 'out', 
      startup: true 
     } 

Answer 3

ИСПОЛЬЗОВАТЬ

var options = 
{ 
    title: 'Total Sale Today', 
    animation: 
      { 
       "startup": true, 
       duration: 2000, 
       easing: 'out' 
      } 
} 

Answer 4

var data = google.visualization.arrayToDataTable(chartArr); 

var options = { 
    sliceVisibilityThreshold: .0, 
    pieHole: 0.3, 
    legend: 'none', 
    pieSliceText: 'label', 
    height:500, 
    width : "100%", 
    is3D: true, 
    animation:{ 
    duration: 5000, 
    easing: 'out', 
    startup: true //This is the new option 
    }, 
}; 

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

chart.draw(data, options); 

// initial value 
var percent = 0; 
// start the animation loop 
var handler = setInterval(function(){ 
    // values increment 
    percent += 1; 
    // apply new values 
    data.setValue(0, 1, percent); 
    data.setValue(1, 1, 100 - percent); 

    // update the pie 
    chart.draw(data, options); 
    // check if we have reached the desired value 
    if (percent > 74) 
     // stop the loop 
     clearInterval(handler); 
}, 30);