Google图表重绘onclick [英] Google chart redraw onclick
本文介绍了Google图表重绘onclick的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想通过各种下拉菜单和日期选择器来创建一个图表，从中可以选择数据。我似乎找不到一个方法来传递新的数据在图表上的点击事件。我得到它的工作到目前为止，onClick，它绘制了一个完整的新图表。但这对我来说似乎没有办法。
那么还有其他方法吗？
HTML：
< div id =piechartstyle =width：450px; height：500px; >< / div>
< div class =date-selector-container>
< div class =btn-group>
< button type =buttonclass =btn btn-primary dropdown-toggledata-toggle =dropdownaria-expanded =false>
Jaar< span class =caret>< / span>
< / button>
< ul class =dropdown-menurole =menu>
< li>< a class =2015-btnhref =＃> 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％将显示。
titlePosition：'none'
};
var chart = new google.visualization.PieChart（document.getElementById（'piechart'））;
chart.draw（data，options）;
}
}）;
//点击按钮，加载新数据
$（。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％
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％将显示。
titlePosition：'none'
};
chart = new google.visualization.PieChart（document.getElementById（'piechart'））;
chart.draw（data，options）;
}
$（document）.ready（function（）{
//点击按钮，加载新数据
$ -btn）。click（function（）{
var data = google.visualization.arrayToDataTable（[
['Task'，'Hours per Day']，
[ 'work'，11]，
['Eat'，2]，
['Commute'，2]，
['Watch TV'，2]，
[ ，'width'，'width'，'height'，'width'，'width'''，'
forceIFrame：'false'，
is3D：'true'，
pieSliceText：'value'，
sliceVisibilityThreshold：1/20，//仅> 5％将显示
titlePosition：'none'
};
chart.draw options）;
}）;
}）;
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.
So is there an other way to do this? 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);
}
});
解决方案
Change your js to look like below.
Create chart variable outside the drawChart function and instead of creating new chart use everywhere the one you already have.
Working example here 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);
});
});
这篇关于Google图表重绘onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
