javascript - Highcharts 气泡图 - 带有错误栏的自定义工具提示(水平或垂直)

Question

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

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，以便错误栏仍然可见。

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

Answer 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;
}

此外，您需要包装工具提示的刷新和隐藏方法，这样箭头栏就会消失。

  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/