代码之家 › 专栏 › 技术社区 › Peterhack

海图中注释的单个形状和位置

highcharts typescript reactjs

Peterhack · 技术社区 · 8 年前

我已经知道如何设置注释的大小 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之间。我怎样才能做到?

另外,我希望文本在框的中心对齐?!

1 回复 | 直到 8 年前

ppotaczek 8 年前

您可以使用 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

应用程序编程接口: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels