Javascript 选择事件上的谷歌图表使用新数据重新绘制图表
大家好,下面我有一个谷歌饼图的代码,它从一个jsontable中获取数据,我希望在单击一个切片时根据选择重新绘制图表 我有下面的代码,我不知道如何继续Javascript 选择事件上的谷歌图表使用新数据重新绘制图表,javascript,php,charts,google-visualization,Javascript,Php,Charts,Google Visualization,大家好,下面我有一个谷歌饼图的代码,它从一个jsontable中获取数据,我希望在单击一个切片时根据选择重新绘制图表 我有下面的代码,我不知道如何继续 <head> <style> div.absolute { position: absolute; top: 120px; } </style> <link href="style.css" rel="
<head>
<style>
div.absolute {
position: absolute;
top: 120px;
}
</style>
<link href="style.css" rel="stylesheet" />
<!--Auto refresh code -->
<meta http-equiv="refresh" content="<?php echo $sec?>;URL='<?php echo $page?>'">
<!--Load the Ajax API-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://rawgit.com/louisremi/jquery-smartresize/master/jquery.throttledresize.js"></script>
<script>
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(initChart);
$(window).on("throttledresize", function (event) {
initChart();
});
function initChart() {
var options = {
title: 'Arrived Today (Email)',
width: '100%',
height: '100%',
sliceVisibilityThreshold: 0,
pieSliceText: 'percentage',
pieStartAngle: 100,
//is3D: 'true',
pieHole: 0.3,
slices: {
1: {offset: 0.2},
2: {offset: 0.3},
3: {offset: 0.4},
4: {offset: 0.5},
5: {offset: 0.6},
},
//slices: {0: {color: 'green'}, 1: {color: 'blue'}},
pieSliceBorderColor: 'black',
legend: 'right',
legendTextStyle: {fontSize: 15},
pieSliceText: 'value' ,
titleTextStyle: {
color: '333333',
fontName: 'Arial',
fontSize: 14 ,
align:'right'
},
chartArea : { left: 35 }
};
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
var total = google.visualization.data.group(data,
[{
type: 'boolean',
column: 0,
modifier: function () {return true;}
}],
[{
type: 'number',
column: 1,
aggregation: google.visualization.data.sum
}]
);
document.getElementById("demo").innerHTML =total.getValue(0,1);
data.addRow(['Total: ' + total.getValue(0, 1), 0]);
drawChart(data, options)
}
function drawChart(data, options) {
var chart = new google.visualization.PieChart(document.getElementById('chart'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
var label1 = data.pieSliceText('label');
// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}
</script>
</head>
<body>
<h2 align="right"><font size="5">emails Arrived Today</font>
<div id="demo"></div>
</h2>
<div id="chart"></div>
</body>
绝对部分{
位置:绝对位置;
顶部:120px;
}
);
var data2=新的google.visualization.DataTable();
var total=google.visualization.data.group(数据、,
[{
类型:'布尔',
列:0,
修饰符:函数(){return true;}
}],
[{
键入:“编号”,
专栏:1,
聚合:google.visualization.data.sum
}]
);
document.getElementById(“demo”).innerHTML=total.getValue(0,1);
data.addRow(['Total:'+Total.getValue(0,1,0]);
绘图图(数据、选项)
}
功能绘图图(数据、选项){
var chart=new google.visualization.PieChart(document.getElementById('chart');
图表绘制(数据、选项);
google.visualization.events.addListener(图表'select',selectHandler);
var label1=data.piesicleText('label');
//选择处理程序。
//循环选择中的所有项目并连接
//他们所有人的一条信息。
函数selectHandler(){
var selection=chart.getSelection();
if(选择.长度){
var PIESICELABLE=data.getValue(选择[0]。行,0);
如果(标签='External')
图表绘制(数据2,选项);
}
}
}
电子邮件今天到达
提前感谢您的帮助:)function initChart(){
....
var data=new google.visualization.DataTable();
var data2=新的google.visualization.DataTable();
....
}
功能绘图图(数据、选项){
google.visualization.events.addListener(图表'select',selectHandler);
函数selectHandler(){
var selection=chart.getSelection();
if(选择.长度){
var PIESICELABLE=data.getValue(选择[0]。行,0);
如果(标签='External')
图表绘制(数据2,选项);
}
}
}
除了变量data2的范围之外,一切看起来都很好。
您可以在函数initChart()
中启动它,然后尝试在drawChart()
的子函数中使用它
您可以在任何javascript函数之外定义
var data2
,或者在调用drawChart
时将其作为参数传递,是否收到任何错误?第一个图表呈现,但当我单击一个切片时,它将停止并不执行任何操作。它应该显示第二个jsontable中的下一个,但没有显示
function initChart() {
....
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var data2 = new google.visualization.DataTable(<?=$jsonTable2?>);
....
}
function drawChart(data, options) {
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler() {
var selection = chart.getSelection();
if (selection.length) {
var pieSliceLabel = data.getValue(selection[0].row, 0);
if (pieSliceLabel = 'External')
chart.draw(data2, options);
}
}
}