Javascript谷歌PieChart動畫加載

Question

我正在做一個谷歌PieChart，我想負載有一個像本網站上顯示的圓形加載效果。 enter link description here 但在這個網絡使用另一個不是谷歌的圖書館。我需要用google找到解決方案。

這是我的代碼：

enter code here 

function cargarDonut(idElemento, color){ 
    google.charts.load("current", {packages:["corechart"]}); 
    google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work',  11], 
    ['Eat',  2], 
    ]); 

    var options = { 
    chartArea:{top:'0%',width:'100%', height:'80%'}, 
    height: 240, 
    backgroundColor: 'transparent', 
    pieHole: 0.67, 
    legend: 'none', 
    pieSliceBorder: 100, 
    pieSliceText: 'none', 
    slices: { 2: {offset: 1}}, 

    colors: [ '#797879', color], 

    }; 

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


} 

} 

Answer 1

這裏我craeted給你一個例子。 https://jsfiddle.net/wecv3x8r/

function cargarDonut(idElemento, color){ 
    google.charts.load("current", {packages:["corechart"]}); 
    google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Task', 'Hours per Day'], 
    ['Work',  11], 
    ['Eat',  2], 
    ]); 

    var options = { 
    chartArea:{top:'0%',width:'100%', height:'80%'}, 
    height: 240, 
    backgroundColor: 'transparent', 
    pieHole: 0.67, 
    legend: 'none', 
    pieSliceBorder: 100, 
    pieSliceText: 'none', 
    slices: { 2: {offset: 1}}, 

    colors: [ '#797879', color], 

    }; 

    var chart = new 
google.visualization.PieChart(document.getElementById(idElemento)); 
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); 

} 

}