Google Charts Startanimation funktioniert nicht

Ich versuche, ein Google Balkendiagramm beim Start zu animieren. Das Diagramm wird angezeigt, animiert jedoch nicht. Ich möchte die Balken des Diagramms von Null bis zu ihren Endwerten wachsen lassen. Ich setze animation.startup auf true, aber es wird immer noch nicht animiert. Was mache ich falsch?Google Charts Startanimation funktioniert nicht

eh.html:

<html> 
    <head> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script type="text/javascript" src="eh.js"></script> 

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

eh.js:

google.charts.load('current', { 
    packages: ['bar'], callback: drawChart 
}); 


function drawChart() { 
    var choices = ["Banana", "Apple", "Orange"]; 
    var votes = [1, 2, 3]; 
    var name = "Favorite fruit"; 
    var dataArray = [ 
     ['Choice', 'Votes'] 
    ]; 

    for (var i = 0; i < choices.length; i++) { 
     dataArray.push([choices[i], votes[i]]); 
    } 
    var data = google.visualization.arrayToDataTable(dataArray); 

    var options = { 
    animation:{ 
     duration: 1000, 
     easing: 'linear', 
     startup: true 
    }, 
    vAxis: {minValue:0, maxValue:100000000}, 
    title: "votes", 
    legend: { position: 'none' }, 
    chart: { title: name, 
      subtitle: 'popularity by Votes' }, 
    bars: 'horizontal', // Required for Material Bar Charts. 
    axes: { 
     x: { 
     0: { side: 'top', label: 'Votes'} // Top x-axis. 
     } 
    }, 
    bar: { groupWidth: "90%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('chart_div')); 
    chart.draw(data, options); 
}

Quelle

2016-07-26 chris nakovski

Animation ist nicht auf Werkstoff Charts unterstützt

siehe Gültige Diagrammtypen unter Supported Modifications

Sie Option verwenden können theme: 'material' den Look and Feel der Nähe

aber top Die x-Achse wird in 'corechart'

nicht unterstützt siehe

folgenden Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var choices = ["Banana", "Apple", "Orange"]; 
 
    var votes = [1, 2, 3]; 
 
    var name = "Favorite fruit"; 
 
    var dataArray = [ 
 
     ['Choice', 'Votes'] 
 
    ]; 
 

 
    for (var i = 0; i < choices.length; i++) { 
 
     dataArray.push([choices[i], votes[i]]); 
 
    } 
 
    var data = google.visualization.arrayToDataTable(dataArray); 
 

 
    var options = { 
 
     animation:{ 
 
      duration: 1000, 
 
      easing: 'linear', 
 
      startup: true 
 
     }, 
 
     vAxis: {minValue:0, maxValue:100000000}, 
 
     title: "votes", 
 
     legend: { position: 'none' }, 
 
     title: name + '\n' + 'popularity by Votes', 
 
     theme: 'material', 
 
     bar: { groupWidth: "90%" } 
 
    }; 
 

 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Quelle

2016-07-26 12:25:44 WhiteHat

Danke, das machte es funktioniert! –

Wenn Sie andere Wahl wollen. vielleicht können Sie Chart.js verwenden Es ist einfach zu lernen, mit vielen Beispielen und beliebt.

Hoffe, das kann Ihnen helfen, weil ich neu bin. Chart.js Documentation

Quelle

2016-07-26 02:04:43

Google Charts Startanimation funktioniert nicht

Antwort

Verwandte Themen