Hoạt ảnh trực quan của Google khi biểu đồ tải lần đầu tiên

Question

Tôi muốn biết liệu tôi có thể áp dụng hoạt ảnh cho các biểu đồ trong lần đầu tiên nó vẽ không?

Và không chỉ khi thay đổi dữ liệu xảy ra?

THanks!

Answer 1

Biểu đồ phải được hiển thị trước khi bạn có thể áp dụng hoạt ảnh đang hiển thị chuyển đổi từ trạng thái này sang trạng thái khác. Bạn có thể thay đổi dữ liệu hoặc thay đổi các tùy chọn biểu đồ để tạo chuyển tiếp và hoạt ảnh của biểu đồ.

Để có thể hiển thị hoạt ảnh trên lần đầu tiên, bạn có thể chỉ cần tạo biểu đồ trống (không có dữ liệu), sau đó thêm dữ liệu vào biểu đồ để hiển thị hoạt ảnh dữ liệu.

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

Hãy thử một cái gì đó như thế này http://jsfiddle.net/h7mSQ/163/. Cách để làm điều này là vẽ biểu đồ với các giá trị bằng không và sau đó đặt các giá trị theo yêu cầu và vẽ biểu đồ một lần nữa. Đừng quên đặt giá trị tối thiểu và tối đa cho trục dọc (trong ví dụ này).

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

CẬP NHẬT ĐÁP

Google đã cập nhật tùy chọn biểu đồ và thêm tùy chọn để animate biểu đồ trên lần đầu tiên nó rút ra.

Vì vậy, điều duy nhất bạn phải làm là psecify nó trong các tùy chọn như thế:

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

Vì vậy, bạn không cần phải tải một biểu đồ trống trên beggining hoặc làm bất kỳ hack khác.

DEMO