Highcharts:y轴上的注释

时间:2017-06-10 16:48:04

标签: highcharts

在Highcharts中有没有办法在y轴上放置某种永久性注释?假设我的y轴从0到100。我得到的数据集的一部分是最小值和最大值,我想在轴上注释那些最小值和最大值,并且我希望在缩放时保留该注释。我尝试了Annotations插件(http://blacklabel.github.io/annotations/),但这似乎并不能满足我的需求。

附上丑陋的,模拟了我想要的截图。通过使用绘图带,Ideal Max和Ideal Min是我已经拥有的东西。 y轴上的Min和Max注释是我想要的。

Ugly, mocked up screenshot of what I would like. The Ideal Max and Ideal Min are things I already have, by using plot bands. The Min and Max annotations on the y axis are what I would like.

1 个答案:

答案 0 :(得分:2)

您可以通过编程方式注释图表。

在加载时,您可以使用Renderer创建标签或形状。在重绘时,您可以重绘注释(在缩放时重绘):

function annotateChart({ text, value }) {
  const annons = this.annons;

  const label = this.renderer.label(text, 0, -9e9).attr({
    stroke: 'red',
    'stroke-width': 2,
    align: 'center',
    zIndex: 99
  }).add();

  annons.push({
    label,
    value
  });
}

function redrawAnnons() {
  const xAxis = this.xAxis[0];
  const yAxis = this.yAxis[0];

  this.annons.forEach(ann => {
    ann.label.animate({
      x: xAxis.toPixels(0),
      y: yAxis.toPixels(ann.value)
    });
  });
}

图表配置:

Highcharts.chart('container', {
chart: {
zoomType: 'xy',
events: {
  load: function() {
    this.annons = [];

    [{
      text: 'min',
      value: 20
    }, {
      text: 'max',
      value: 85
    }].forEach(obj => {
      annotateChart.call(this, obj);
    });

    redrawAnnons.call(this)
  },
  redraw: redrawAnnons
}
},

示例:http://jsfiddle.net/47ao5tfz/