我正在尝试在信息中心中实施可点击的图表。根据点击的饼图片段,用户将被重定向到不同的网页。但是,当我在ChartWrapper对象中使用getChart()时,chartObject为NULL。从ChartWrapper中提取DataTable没有问题。
我尝试在代码中的'select'事件之前使用'ready'事件,但仍然获得NULL。有什么建议吗?
您可以试用代码here
// Define a Pie chart 3
pie3 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart3',
'options': {
//'width': 400,
'height': 300,
'legend': {'position':'right', 'textStyle': {fontSize: 9}},
'title': 'Audit Type',
'chartArea': {'left': 80, 'top': 30, 'right': 0, 'bottom': 0, 'height':300, 'widith':200},
'pieSliceText': 'value',
'slices': {0: {color: '#9fbfdf'}, 1: {color: '#6699cc'}, 2: {color: '#3973ac'}, 3: {color: '#738b28'}, 4: {color: '#a4c639'}, 5: {color: '#bfd774'}},
'fontSize': 11
},
// from the 'data' DataTable.
'view': {'columns': [6]}
});
google.visualization.events.addListener(pie3, 'ready', onReady);
// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and the category
// picker will drive both charts.
bind([yearPicker, slider2, categoryPicker], [pie, pie2, pie3]).
// Draw the entire dashboard.
draw(data);
function onReady() {
google.visualization.events.addListener(pie3.getChart(), 'select', handler);
}
function handler() {
chartObject = pie3.getChart().getSelection();
alert(chartObject);
}
}
google.setOnLoadCallback(drawVisualization);
答案 0 :(得分:1)
您的主要问题是您只将1列数据传递给每个PieChart。 PieCharts期望有两列数据:1个用于饼图切片标签的字符串列和1个用于饼图切片值的数字列。您需要向每个PieChart添加第二列数据。
除此之外,您需要将图表代码移到$(document).ready(function() {...});
处理程序之外并加载API的版本1而不是1.1(除非您有特定的理由加载候选版本)。通常,您的代码应该像这样组织:
$(document).ready(function () {
// do stuff on document ready
});
function drawVisualization () {
// draw dashboard
}
google.load('visualization', '1', {packages: ['controls'], callback: drawVisualization});