ChartWrapper.getChart（）返回null

我試圖在儀表板中實現可點擊的圖表。用戶將根據點擊的餅圖部分重定向到不同的網頁。但是，當我在ChartWrapper對象中使用getChart（）時，chartObject爲NULL。從ChartWrapper中拔出DataTable沒有問題。ChartWrapper.getChart（）返回null

我試着在我的代碼中'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);

來源

2013-12-19 Wen Jun

我會根據您的代碼要一把小提琴，它的工作原理：http://jsfiddle.net/asgallant/hKj7g/。你可以用完整的JavaScript代碼或jsfiddle鏈接更新你的帖子，以演示他們的問題嗎？ – asgallant

我用我的完整代碼更新了你的jsfiddle。你可以嘗試點擊第三個餅圖。它返回null。 –

什麼是新的jsfiddle鏈接？ – asgallant

您的主要問題是，你只能通過數據的列1到每個餅圖。 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});

來源

2013-12-19 14:45:26 asgallant

每個餅圖片都需要一個值才能正確繪製。該值由第二列數據給出。您的數據具有「內部」和「外部」審計類型，但它們沒有值。「外部」應該佔多大比例？如果您不提供數據，圖表如何知道？ – asgallant

該圖表在我的DataTable上對錶中出現的行數「External」進行計數。從鏈接中可以看到，我的PieChart能夠通過傳遞1列數據來顯示「外部」事件的總數。我已通過傳遞2列數據來嘗試您的建議。它現在實際上工作。我需要考慮如何重新組織DataTable的結構，以便它不會影響我的儀表板控件和餅圖的完整性。 –

這不是你想做的。您的數據具有2個「外部」審覈和1個「內部」審覈，但PieChart顯示每個審覈中有1個。您需要使用分組功能（[google.visualization.data.group]（https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_group））計算每個分數，然後顯示基於組結果的圖表。由於您也在連接控件，因此這會變得更加複雜，因爲每次控件更改狀態時都必須重新組合數據。 – asgallant

ChartWrapper.getChart（）返回null

回答

相關問題