谷歌圖表 - BoxPlot

Question

我試圖展示一個boxplot（交流Q1，中位數和Q3）的分類測試分數。我能想到的最簡單/最好的方法是用中值創建一個柱形圖，將這些列的不透明度設置爲0，然後對Q1，中值和Q3使用區間（樣式：'框'）。這是我的jsfiddle：

http://jsfiddle.net/gyo5nLvx/

這裏是當列圖表的繪製選項：

var options = { 
    title: 'Math Test Results', 
    width: 500, 
    hAxis: {title: 'Subject'}, 
    vAxis: {minValue: 0, maxValue: 100}, 
    intervals: { 'lineWidth':1, 'boxWidth': .8, style: 'boxes' }, 
    colors:['red','green'], 
    dataOpacity: 0 
}; 

正如你所看到的，中間被定位在無形柱的高度， Q1在下面，Q3在上面。這就是我最終希望它看起來的樣子 - 一條具有3條水平線（Q1，med和Q3）的「浮動」垂直矩形。但是，有兩個小問題會影響我：

1）因爲列不透明度是透明的，所以用戶必須將鼠標懸停在不可見的欄上以查看數據點。從技術上講，他們必須懸停在下半部分......如果用戶懸停在boxplot的上半部分，數據點將不會顯示（可能是因爲不可見的列不在該區域之下）。我想讓用戶懸停在盒子上的任何地方，數據就會顯示出來。

2）工具提示顯示數據點，然後顯示括號中的間隔（例如，Midterm：50 [40,50,60]）。我發現這是重複的，因爲中位數列出了兩次。

我知道這些都是次要的，但正如帕累託原則所指出的，我的時間的80％似乎被這20％的細節所消耗。任何想法/建議？謝謝。

Answer 1

1. 由於底層列是不可見的，數據點顯示在別處，因此您可以將其設置爲100來跨越整個高度。不幸的是，該工具提示跟隨。

2. 您可以通過添加具有工具提示角色的列來覆蓋懸停文本。是的，這意味着你的重複數據，但假設你的數據在什麼地方建，它應該是相當容易..

這裏是我的版本上的jsfiddle：http://jsfiddle.net/48ynpzd0/

而這裏的相關代碼底層的數據表：

var data = new google.visualization.DataTable(); 
data.addColumn('string', 'x'); 
data.addColumn('number', 'Midterm'); 
data.addColumn({id:'i0', type:'number', role:'interval'}); 
data.addColumn({id:'i1', type:'number', role:'interval'}); 
data.addColumn({id:'i2', type:'number', role:'interval'}); 
data.addColumn({id:'tt', type:'string', role:'tooltip'}); 
data.addColumn('number', 'Final'); 
data.addColumn({id:'i0', type:'number', role:'interval'}); 
data.addColumn({id:'i1', type:'number', role:'interval'}); 
data.addColumn({id:'i2', type:'number', role:'interval'}); 
data.addColumn({id:'tt', type:'string', role:'tooltip'}); 

data.addRows([ 
    ['Algebra', 100, 40, 50, 60, 'Algebra Midterm: 40, 50, 60', 100, 45, 53, 74, 'Algebra Final: 45, 53, 74'], 
    ['Geometry', 100, 61, 71, 84, 'Geometry Midterm: 61, 71, 84', 100, 55, 62, 69, 'Geometry Final: 55, 62, 69']]);