javascript 谷歌图表重绘onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30640728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google chart redraw onclick
提问by Amst3l
I am trying to make a chart from which the data is selectable through various dropdown menu's and a date selector. I can't seem to find a way to pass new data in the chart on a click event. I got it working so far that onClick, it draws an entire new chart. But this doesn't seem the way to me.
我正在尝试制作一个图表，可以通过各种下拉菜单和日期选择器从中选择数据。我似乎无法找到一种方法来在点击事件的图表中传递新数据。到目前为止，我让它在 onClick 上工作，它绘制了一个全新的图表。但这对我来说似乎不是办法。
So is there an other way to do this? HTML:
那么有没有其他方法可以做到这一点？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:
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);
}
});
回答by Molda
Change your js to look like below.
将您的 js 更改为如下所示。
Create chart variable outside the drawChart function and instead of creating new chart use everywhere the one you already have.
在 drawChart 函数之外创建图表变量，而不是创建新图表，而是在任何地方使用您已有的图表。
Working example here jsfiddle
这里的工作示例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);
});
});
