如何在沒有數據時顯示空谷歌圖表？

Question

考慮繪製一個柱形圖，我沒有從數據源中獲取任何數據，我們如何繪製一個空的圖表，而不是顯示一個紅色的默認消息「表沒有列」。任何幫助讚賞。提前致謝！

Answer 1

我所做的是用1列和1個數據點（設置爲0）初始化我的圖表。然後，每當數據被添加，我檢查是否只有1列，它是虛擬列，然後我刪除它。我也隱藏了圖例，以便它不會出現在虛擬列中，然後在新列添加時添加它。

下面是一些示例代碼，你可以插入Google Visualization Playground，這就是我所說的。你應該看到空的圖表2秒鐘，然後數據將被添加，列將出現。

var data, options, chart; 

function drawVisualization() { 

    data = google.visualization.arrayToDataTable([ 
    ['Time', 'dummy'], 
    ['', 0], 
    ]); 

    options = { 
    title:"My Chart", 
    width:600, height:400, 
    hAxis: {title: "Time"}, 
    legend : {position: 'none'} 
    }; 

    // Create and draw the visualization. 
    chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    chart.draw(data,options); 
    setTimeout('addData("12:00",10)',2000); 
    setTimeout('addData("12:10",20)',3000); 
} 

function addData(x,y) { 
    if(data.getColumnLabel(1) == 'dummy') { 
    data.addColumn('number', 'Your Values', 'col_id'); 
    data.removeColumn(1); 
    options.legend = {position: 'right'}; 
    } 

    data.addRow([x,y]); 
    chart.draw(data,options); 
}​ 

Answer 2

對這個問題更好的解決方案可能是使用註釋列而不是數據列，如下所示。使用此解決方案，您無需使用任何setTimeout或自定義功能來刪除或隱藏列。試試把下面的代碼粘貼到Google Code Playground。

function drawVisualization() { 
    var data = google.visualization.arrayToDataTable([ 
     ['', { role: 'annotation' }], 
     ['', ''] 
    ]); 

    var ac = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    ac.draw(data, { 
     title : 'Just a title...', 
     width: 600, 
     height: 400 
    }); 
} 

Answer 3

的方式我這樣做是通過禁用扇形，在假裝值關閉提示，填料，使其灰色。我相信有更聰明的方法可以做到這一點，但這對其他方法沒有的地方適用。

唯一的缺點是它將圖例中的兩個項都設置爲灰色。我想你或許可以只添加第三個項目，並使其僅在圖例上不可見。儘管我喜歡這種方式。

function drawChart() { 
// Define the chart to be drawn. 
    data = new google.visualization.DataTable(); 
    data.addColumn({type: 'string', label: 'Result'}); 
    data.addColumn({type: 'number', label: 'Count'}); 
    data.addRows([ 
      ['Value A', 0], 
      ['Value B', 0] 
    ]); 

    var opt_pieslicetext = null; 
    var opt_tooltip_trigger = null; 
    var opt_color = null; 
    if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) { 
    opt_pieslicetext='none'; 
    opt_tooltip_trigger='none' 
    data.setCell(1,1,.1); 
    opt_color= ['#D3D3D3']; 
    } 
    chart = new google.visualization.PieChart(document.getElementById('mydiv')); 
    chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color }); 
}