Highcharts 气泡图 - 带有错误栏的自定义工具提示（水平或垂直）答案

【问题标题】：Highcharts bubble graph - Custom Tooltip with Error bar (either horizontal or vertical)Highcharts 气泡图 - 带有错误栏的自定义工具提示（水平或垂直）
【发布时间】：2017-04-29 16:46:35
【问题描述】：

我已经设置了一个时间序列气泡图。

http://jsfiddle.net/mshaffer/kLk22j37/

元素有 3 种类型：P、A、B。

data: [
                { x: Date.UTC(1990,1,1), y: .63, z: 1.2, name: 'P', patent: {docid:07654321, vecsim: .63, title:'My Patent Title',abstract:'My Patent Abstract',firm:'My Patent Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datefiled: 'March 1, 2005', dategranted: 'July 1, 2007'} }, 
                { x: Date.UTC(2010,1,1), y: .93, z: 1.1, name: 'A', application: {docid:216000313,  vecsim: .93, title:'My Application Title',abstract:'My Application Abstract', firm:'My Application Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datepublished: 'August 1, 2005'} }, 
                 { x: Date.UTC(2000,1,1), y: .73, z: 1.3, name: 'B', patent: {docid:07654321,  vecsim: .73, title:'My Patent Title',abstract:'My Patent Abstract',firm:'My Patent Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datefiled: 'March 1, 2005', dategranted: 'July 1, 2007'}, application: {docid:216000313,  vecsim: .77, title:'My Application Title',abstract:'My Application Abstract', firm:'My Application Firm', technology:'Tech 1 (title from dict) <BR /> Tech 2 (title from dict)', datepublished: 'August 1, 2005'} }, 
            ]

对于“B”两者的场景（这意味着“P”和“A”都存在数据），我想绘制一个错误栏（在这种情况下是垂直的）以连接各个对象中的两个 vecsim 值. [.77, .73]

工具提示自定义函数'writeToolTip'需要绘制错误栏，str所以错误栏仍然可见。

作为工具提示，当悬停移除时，错误栏也需要消失。

【问题讨论】：

垂直和水平都意味着 (x1,y1) 和 (x2,y2) 作为误差线端点...并且每个点可能具有不同的形状...箭头、点等。
你的描述我不清楚。你有你想要达到的目标的图片，或者你能做到吗？当工具提示出现时，您想让错误栏系列可见吗？
除了默认工具提示外，还显示与元素数据相关的单个“错误栏”。在这种情况下，在 x=Date.UTC(2000,1,1) 处从 y1=0.73 到 y2=0.77 为名为“B”的点绘制一个误差条。也许是一个错误栏“系列”，或者只是一个新的渲染对象。我还没弄明白。

标签： javascript jquery highcharts bubble-chart errorbar

【解决方案1】：

创建一系列没有颜色的误差线。在该系列中，将误差线与具有自定义属性的气泡点相关联，例如链接到：

 {
  type: 'errorbar',
  enabledMouseTracking: false,
  color: 'none',
  data: [{
    x: Date.UTC(1990, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'P'
  },{
    x: Date.UTC(2000, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'B'
  },{
    x: Date.UTC(2010, 1, 1),
    low: 0.73,
    high: 0.77,
    linkedTo: 'A'
  }]
}

在工具提示格式化程序中，为相关的错误栏设置正确的颜色。

function writeToolTip(obj) {
  var errorBars = obj.series.chart.series[1].data;
  errorBars.forEach(point => {
  if (point.linkedTo === obj.key) {
    var paths = point.graphic.element.children;
    Array.prototype.forEach.call(paths, path => {
      path.setAttributeNS(null, 'stroke', 'black');
    });
  }
});

var str = '';
str += 'Write out details based on existence of which (patent / app)';
return str;
}

另外，你需要把tooltip的refresh和hide方法包裹起来，这样箭头条就会消失。

  Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) {
    p.call(this, delay);
    hideErrorBars(this.chart.series[1].data);
  });

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
  if (point) {
    hideErrorBars(point.series.chart.series[1].data);
  }

  p.call(this, point, mouseEvent);
});

示例：http://jsfiddle.net/kLk22j37/13/

【讨论】：