Google chart redessiner onclick
Je suis en train de faire un graphique à partir de laquelle les données sont sélectionnables par le biais de divers menu déroulant et un sélecteur de date. Je n'arrive pas à trouver un moyen de transmettre de nouvelles données dans le graphique sur un événement de clic. Je l'ai eu à travailler si loin que onClick, il attire tout un nouveau graphique. Mais cela ne semble pas le chemin de moi.
Donc, il y a une autre façon de faire?
HTML:
<div id="piechart" style="width: 450px; height: 500px;"></div>
<div class="date-selector-container">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Jaar <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="2015-btn" href="#">2015</a></li>
<li><a href="#">2014</a></li>
<li><a href="#">2013</a></li>
</ul>
</div>
JS:
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 1],
['Eat', 22],
['Commute', 32],
['Watch TV', 42],
['Sleep', 75]
]);
var options = {
chartArea: {width:'100%',height:'100%'},
forceIFrame: 'false',
is3D: 'true',
pieSliceText: 'value',
sliceVisibilityThreshold: 1/20, //Only > 5% will be shown.
titlePosition: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
//On button click, load new data
$(".2015-btn").click(function(){
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
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 = {
chartArea: {width:'100%',height:'100%'},
forceIFrame: 'false',
is3D: 'true',
pieSliceText: 'value',
sliceVisibilityThreshold: 1/20, //Only > 5% will be shown.
titlePosition: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
InformationsquelleAutor Amst3l | 2015-06-04
Vous devez vous connecter pour publier un commentaire.
Changer votre js pour ressembler à ci-dessous.
Créer un tableau variable en dehors de la drawChart fonction et au lieu de créer un nouveau graphique utiliser partout celui que vous avez déjà.
Exemple ici jsfiddle