谷歌图表 - 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']]);