ChartWrapper.getChart()返回null

时间:2013-12-19 01:15:24

标签: google-visualization google-chartwrapper

我正在尝试在信息中心中实施可点击的图表。根据点击的饼图片段,用户将被重定向到不同的网页。但是,当我在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);

1 个答案:

答案 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});