Biểu đồ hình động hoạt hình với Google Visualization

Tôi đang thử nghiệm với biểu đồ google. Tôi muốn một biểu đồ hình tròn hoạt hình từ 0% đến 75% (xem hình bên dưới). Tôi đang cố gắng đạt được điều này thông qua biểu đồ google. Tôi đang tạo hai bộ dữ liệu, một bộ sẽ bắt đầu ở mức 99%, dữ liệu còn lại là 1%. Tôi muốn đảo ngược và làm sống động những điều này. Tôi đã đạt được thay đổi các giá trị thông qua hoạt hình, nhưng không thể tìm ra cách làm cho chúng hoạt hình.Biểu đồ hình động hoạt hình với Google Visualization

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     google.load('visualization', '1.0', {'packages':['corechart']}); 

     google.setOnLoadCallback(drawChart); 

     function drawChart() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'text'); 
     data.addColumn('number', 'number'); 

     data.addRows(2); 
     data.setValue(0, 0, 'Work'); 
     data.setValue(0, 1, 1); 
     data.setValue(1, 0, 'Eat'); 
     data.setValue(1, 1, 99); 

     var options = { 
         width:500, 
         height:500, 
         animation: {duration: 1000, easing: 'out',} 
         }; 

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

     chart.draw(data, options); 

     function aniChart(d,o){ 
      for (var i=1; i<100; i++) { 
      data.setValue(0, 1, i); 
      } 

      for (var i=99; i>00; i--) { 
      data.setValue(1, 1, i); 
      } 
      setTimeout(function(){ 
      chart.draw(data, options); 
      }, 1000); 

     }; 

     aniChart(); 

     } 
    </script> 
    </head> 

    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

chart

Nguồn

2013-06-21 TechyDude

bạn muốn nó đi màu xanh/đỏ/xanh/đỏ ... và như vậy là phiên đầu tiên? – Fabi

Lý tưởng nó sẽ là màu trắng đầu tiên, sau đó màu sắc sẽ hoạt hình giống như một bàn tay đồng hồ với phần trăm mong muốn. – TechyDude

Chức năng 'aniChart' sai. Bạn đang lặp qua tất cả các giá trị và sau đó thực hiện cuộc gọi rút đơn chậm cuối cùng. Không có vòng lặp hoạt ảnh. – daVe

Tôi tin rằng chức năng không được hỗ trợ bởi Google Charts api - tham khảo Supported Modifications

Tôi nghĩ rằng nó có thể được dễ dàng hơn nếu bạn sử dụng một công cụ biểu đồ khác nhau như thế này http://bl.ocks.org/mbostock/1346410

Nguồn

2013-06-26 17:08:28 Fabi

ví dụ biểu đồ là tuyệt vời. Nó dựa trên thư viện d3 cũng là tuyệt vời. Nó yêu cầu một trình duyệt hỗ trợ SVG. Hoàn hảo cho các ứng dụng di động. Bạn có thể tạo hiệu ứng động, thêm các sự kiện cảm ứng, thay đổi các cạnh bánh tương tác với một số JS. – mbokil

<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>   
</head> 
<body> 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 

    <script> 
       google.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities',   
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 

    var counter = 0; 

    var handler = setInterval(function(){ 
     counter = counter + 0.1 
     options = { 
      title: 'My Daily Activities',   
      slices: { 1: {offset: counter},      
        3: {offset: counter},      
        5: {offset: counter}, 
      } 
     }; 
     chart.draw(data, options); 

     if (counter > 0.3) clearInterval(handler); 
    }, 200);   
    } 
    </script> 
</body>

Nguồn

2015-10-06 07:13:06

đặt yếu tố này vào thẻ nội dung

và trong thẻ đầu –

Trong khi mã này có thể trả lời câu hỏi, cung cấp ngữ cảnh bổ sung liên quan đến * cách * và/hoặc * lý do * giải quyết vấn đề sẽ cải thiện giá trị lâu dài của câu trả lời. – Keale

Giải quyết vấn đề ban đầu bằng vòng lặp hoạt hình @Muhammad gọn gàng.

giá trị ban đầu:

làm việc: 0%
Ăn: 100%

Các vòng lặp tăng đơn vị giá trị 1 và vẽ chiếc bánh mỗi 30 mili giây.

Vòng lặp dừng khi công việc = 75% đạt được.

google.load('visualization', '1.0', {'packages':['corechart']}); 
 

 
google.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 

 
var data = new google.visualization.DataTable(); 
 
data.addColumn('string', 'text'); 
 
data.addColumn('number', 'number'); 
 

 
data.addRows(2); 
 
data.setValue(0, 0, 'Work'); 
 
data.setValue(0, 1, 0.0); 
 
data.setValue(1, 0, 'Eat'); 
 
data.setValue(1, 1, 100.0); 
 

 
var options = { 
 
    width:500, 
 
    height:500 
 
}; 
 

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

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

 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

Nguồn

2016-11-03 15:30:53 daVe

Biểu đồ hình động hoạt hình với Google Visualization

Trả lời

Các vấn đề liên quan