在谷歌圖表上顯示字幕上方的標題

我有一個簡單的Google柱狀圖表，其中包含一系列數據。我需要在每個欄上方顯示標題，因爲tooltip不夠。但是沒有標準選項可以做到這一點。你看到了嗎？在谷歌圖表上顯示字幕上方的標題

google.load('visualization', '1', {packages: ['corechart']}); 

$(document).ready(function() { 

var data = new google.visualization.DataTable() 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
    ['Mushrooms', 3], 
    ['Onions', 1], 
    ['Olives', 1], 
    ['Zucchini', 1], 
    ['Pepperoni', 2] 
]); 


new google.visualization.ColumnChart(document.getElementById('visualization')). 
draw(data, {width: 500, height: 440, legend: 'none', 
      enableInteractivity: false}); 
});

，你也可以在jsfiddle

來源

2011-10-20 Oleg Kalyta

與此代碼玩這個答案是比被要求多一點。下面的代碼演示瞭如何爲每個小節創建不同顏色的條形圖，並在每個小節上方使用不同的標籤。

function drawVisualization() { 

  var data = google.visualization.arrayToDataTable([ 
    ['',        'Value', 'Value', 'Value', 'Value' ], 
    ['Label1',  0,       0,       0,       997974  ], 
    ['Label2',  1538156, 0,       0,       0       ], 
    ['Label3',  0,       440514,  0,       0       ], 
    ['Label4',  0,       0,       1004163, 0       ] 
  ]); 

  new google.visualization.BarChart(document.getElementById('visualization')). 
      draw(data, 
           { 
            isStacked: true, 
            legend: {position: 'none'}, 
            colors: ['grey', 'lightgray', 'yellow', 'cyan'] 
           } 
      ); 
}

將其粘貼在google playground並檢查自己。

來源

2012-08-27 15:00:55 Leksat

在谷歌圖表上顯示字幕上方的標題

回答

相關問題