Question

我已经弄清楚了如何设置注释individually的大小：

          labels: [
            {
              point: {
                x: chart.xAxis[0].max - 0.1,
                y: 50,
                xAxis: 0,
                yAxis: 0
              },
              height: 100,
              shape: "rect",
              text: "test",
              verticalAlign: "bottom"
            }
          ]

我希望它的位置在50到150之间。如何实现？

此外，我希望文本在框的中心对齐吗？！

Answer 1

您可以使用toPixels方法来计算高度。您还必须考虑padding。要使文本居中，可以使用异步功能，因为在加载事件中尚不存在注释。

  chart: {
    events: {
      load: function() {
        const chart = this;
        const height =
          chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);

        chart.addAnnotation({
          labels: [
            {
              point: {
                x: chart.xAxis[0].max - 0.1,
                y: 150,
                xAxis: 0,
                yAxis: 0
              },
              y: 0,
              padding: 0,
              height: height,
              shape: "rect",
              text: "test",
              verticalAlign: "top"
            }
          ]
        });
      }
    }
  }

实时演示：https://codesandbox.io/s/qqqkx2zr49

API：https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

高图中注释的单独形状和位置

1 个答案: