Google BoxPlot

Question

我试图显示一个盒子图(交流Q1，中位数，和Q3)的分类测试分数。我能想到的最简单/最好的方法是用中介创建一个列图，将这些列的不透明度设置为0，然后对Q1、中位数和Q3使用间隔(样式：‘for’)。这是我的小提琴：

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)由于列的不透明度是透明的，用户必须悬停在不可见的栏上才能看到数据点。从技术上讲，它们必须悬停在较低的half...if (用户悬停在框图的上半部分)上，数据点不会显示(大概是因为不可见的列不在该区域)。我想让用户悬停在任何地方的框和数据将显示。

2)工具提示显示数据点，然后显示括号中的间隔(例如期中: 50、40、50、60 )。我觉得这是重复的，因为中位数被列出了两次。

我知道这些都是次要的，但正如帕累托原则所述，我80%的时间似乎被这20%的细节所消耗。有什么想法/建议吗？谢谢。

Answer 1

1. 由于基础列是不可见的，而且数据点显示在其他地方，所以可以将其设置为100以跨越整个高度。不幸的是，工具提示也是如此。
2. 可以通过添加具有工具提示角色的列来覆盖悬停文本。是的，这意味着您在重复数据，但是假设您的数据是在某个地方构建的，这应该相当容易。

这是我在jsfiddle上的版本：http://jsfiddle.net/48ynpzd0/

下面是底层datatable的相关代码：

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']]);