Анимация визуализации Google при первой загрузке графика - PullRequest
Новая
       12

Анимация визуализации Google при первой загрузке графика

9 голосов
/ 15 марта 2012

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

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

спасибо! * * 1005

Ответы [ 3 ]

15 голосов
/ 28 января 2015

ОБНОВЛЕННЫЙ ОТВЕТ

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

Так что единственное, что вам нужносделать это - использовать его в следующих параметрах: 

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

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

DEMO

8 голосов
/ 07 февраля 2013

Попробуйте что-то вроде этого 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);
8 голосов
/ 15 марта 2012

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

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

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]);
...