目前還沒有辦法建立在谷歌的可視化顯示的圖表。您可以使用DataTable Roles創建錯誤欄,但BarChart
不支持註釋(意味着您無法在圖表上顯示文本,就像您發佈的示例中那樣)。
你可以撥弄ComboChart
,它可以支持註釋,但是你會遇到柱狀圖(不是柱狀圖)。
這裏是一個條形圖代碼:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn({type:'string', label:'label'});
data.addColumn({type:'number', label:'value', pattern:'#.#%'});
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
data.addRows([
['1', 0.074, 0.055, 0.098, 'A', '7.4% (-1.9/2.4)'],
['2', 0.04, 0.027, 0.059, 'B', '4.0% (-1.3/1.9)'],
['3', 0.117, 0.093, 0.146, 'C', '11.7% (-2.4/2.9)'],
['4', 0.217, 0.185, 0.252, 'D', '21.7% (-3.2/3.5)'],
['5', 0.552, 0.511, 0.592, 'E', '55.2% (-4.1/4.0)'],
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"SubPopulation B",
width:600, height:400,
vAxis: {title: "Importance"},
hAxis: {title: "Percent", format:'#%'},
}
);
}
這裏是一個comboChart版本代碼:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn({type:'string', label:'label'});
data.addColumn({type:'number', label:'value', pattern:'#.#%'});
data.addColumn({type:'number', label:'line', pattern:'#.#%'});
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'number', role:'interval', pattern:'#.#%'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
data.addRows([
['1', 0.074, 0.074, 0.055, 0.098, '7.4% (-1.9/2.4)', '7.4% (-1.9/2.4)'],
['2', 0.040, 0.040, 0.027, 0.059, '4.0% (-1.3/1.9)', '4.0% (-1.3/1.9)'],
['3', 0.117, 0.117, 0.093, 0.146, '11.7% (-2.4/2.9)', '11.7% (-2.4/2.9)'],
['4', 0.217, 0.217, 0.185, 0.252, '21.7% (-3.2/3.5)', '21.7% (-3.2/3.5)'],
['5', 0.552, 0.552, 0.511, 0.592, '55.2% (-4.1/4.0)', '55.2% (-4.1/4.0)'],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Subpopulation B',
width: 600,
height: 400,
vAxis: {title: "Percentage", format:'#%'},
hAxis: {title: "Importance"},
seriesType: "bars",
series: {1: {type: "line"}}
});
}
您可以隱藏使用的選項就行了,使它看起來有點漂亮,但總的來說,它看起來很相似(它不像你的樣本那麼漂亮)。
如果這兩個都不適合你,那麼你將需要編寫自定義JavaScript來手動添加工具提示(註釋)到BarChart
。我不知道如何(因爲我不是JavaScript專家),所以如果上述解決方法不夠好,我會留給你。