Google Визуализация Анимация, когда диаграмма загружается впервые

Question

Я хотел бы знать, могу ли я применить анимацию к графикам в первый раз, когда она рисует?

И не только когда происходит смена данных?

Чин!

Answer 1

Диаграмма должна быть визуализирована, прежде чем вы сможете применить свою анимацию, которая показывает переход из одного состояния в другое. Вы можете либо изменить данные, либо изменить параметры графика, чтобы создать переход и его анимацию.

Для того, чтобы показать анимацию на в первый раз, вы можете просто создать пустую диаграмму (без данных), а затем добавить свои данные в диаграмму, чтобы показать анимацию данных.

var options = { 
    animation:{ 
    duration: 1000, 
    easing: 'out', 
    } 
}; 
var data = new google.visualization.DataTable(); 
data.addColumn('string', 'N'); 
data.addColumn('number', 'Value'); 
var chart = new google.visualization.ColumnChart... 
chart.draw(data, options); 
// Adding data 
data.addRow(['V', 200]); 

Answer 2

Попробуйте что-нибудь подобное http://jsfiddle.net/h7mSQ/163/. Способ сделать это - отобразить график с нулевыми значениями, а затем установить значения по мере необходимости и снова нарисовать диаграмму. Не забудьте установить минимальное и максимальное значение для (в этом примере) вертикальной оси.

function drawChart() { 
    var option = {title:"Yearly Coffee Consumption in our company", 
       width:600, height:400, 
       animation: {duration: 1000, easing: 'out',}, 
       vAxis: {title: "Cups of coffee", minValue:0, maxValue:500}, 
       hAxis: {title: "Year"}}; 
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'N'); 
    data.addColumn('number', 'Value'); 
    data.addRow(['2003', 0]); 
    data.addRow(['2004', 0]); 
    data.addRow(['2005', 0]); 
    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
    chart.draw(data, option); 
    data.setValue(0, 1, 400); 
    data.setValue(1, 1, 300); 
    data.setValue(2, 1, 400); 
    chart.draw(data, option); 

} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

Answer 3

ОБНОВЛЕНО ОТВЕТ

Google обновил параметры диаграммы и добавлена ​​возможность анимировать диаграмму на первый раз она черпает.

Так что единственное, что вам нужно сделать, это psecify его в настройках как то:

var options = { 
      animation: { 
       duration: 1500, 
       startup: true //This is the new option 
      } 
     }; 

Таким образом, вы не должны загрузить пустую таблицу на beggining или в делать любой другой хак.

DEMO