Google visualization 谷歌图表-箱线图

我试图显示分类测试分数的箱线图（第一季度、中位数和第三季度）。我能想到的最简单/最好的方法是创建一个带有中间值的柱状图，将这些柱的不透明度设置为0，然后对Q1、中值和Q3使用间隔（样式：“框”）。这是我的JSFIDLE：

以下是绘制柱状图时的选项：

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） 由于列不透明度是透明的，因此用户必须将鼠标悬停在不可见条上才能看到数据点。从技术上讲，它们必须悬停在下半部分上……如果用户悬停在箱线图的上半部分上，数据点将不会显示（可能是因为不可见列不在该区域下）。我希望用户将鼠标悬停在框的任何位置，数据就会显示出来

2） 工具提示显示数据点，然后在括号中显示间隔（例如，中期：50[40,50,60]）。我发现这是重复的，因为中位数列了两次

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

由于基础列不可见，并且数据点显示在其他位置，因此可以将其设置为100以跨越整个高度。不幸的是，工具提示也是如此

可以通过添加具有工具提示角色的列来覆盖悬停文本。是的，这意味着您在重复数据，但假设您的数据是在某处构建的，这应该相当容易

以下是我在JSFIDLE上的版本：

下面是底层数据表的相关代码：

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

---

将鼠标悬停在实际框上时，工具提示似乎不会显示。在列的其余部分可以很好地工作，而不是实际的框。