谷歌图表重绘onclick
我正在尝试制作一个图表，通过各种下拉菜单和日期选择器可以从中选择数据。 我似乎找不到在点击事件中传递图表中的新数据的方法。 到目前为止我已经开始工作了onClick，它绘制了一个全新的图表。 但这似乎不是我的方式。
那么有另一种方法可以做到这一点吗？ HTML：
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); } });
将您的js更改为如下所示。
在drawChart函数之外创建图表变量，而不是在您已经拥有的图表的任何地方创建新图表。
这里的工作示例是jsfiddle
google.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); google.setOnLoadCallback(drawChart); var chart; 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' }; chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } $(document).ready(function(){ //On button click, load new data $(".2015-btn").click(function() { 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' }; chart.draw(data, options); }); });