Highcharts：y轴上的注释-Java 学习之路

在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 回答

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

在加载时，您可以使用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/

回复于 2024-05-01T18:45:01+08:00

Highcharts：y轴上的注释

1 回答

相关问题