点击重新绘制谷歌图表
Google chart redraw onclick
我试图通过各种下拉菜单和日期选择器使数据可选择的图表。我似乎找不到一种方法来传递单击事件上的图表中的新数据。我让它工作到现在,onClick,它画了一个完整的新图表。但这对我来说似乎不是方法。
那么还有别的方法吗?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);
}
});
把你的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);
});
});
相关文章:
- 在谷歌地图上绘制位置数据库
- 使用谷歌图表在x轴上绘制日期
- 使用复选框绘制多段线谷歌地图API3,不'不起作用
- 谷歌地图API在Javascript中,绘制圆的半径
- 使用Raphael js直接在谷歌地图上绘制
- 在最初的查询/表格绘制中只提取谷歌电子表格的一列
- 画布-绘制的线,但没有显示在谷歌检查元素
- 谷歌地图/GMAP3 - 绘制从用户地理位置到已知目的地的路线 - 需要帮助
- 如何使用谷歌地图绘制已知路线 JavsScript API V3.
- 用不同的x轴数据集绘制谷歌折线图
- 网络应用程序中绘制的谷歌柱状图错误
- 谷歌用数字绘制时间线
- 如何在谷歌地图API中使用坐标数组绘制多边形
- 使用谷歌地图绘制半径内的点
- 尝试在谷歌地图V3中绘制超过10个标记,不使用地理编码
- 在谷歌地理图中绘制两点之间的曲线
- 如何在绘制谷歌地图后将其更改为卫星视图
- 在谷歌地图中绘制闪电数据
- 如何在谷歌地图上绘制图形从网上墨卡托米/英尺
- 谷歌绘制你的时间线api