Highcharts：如何使 SVGRenderer 标签响应答案

【问题标题】：Highcharts: How to make SVGRenderer labels responsiveHighcharts：如何使 SVGRenderer 标签响应
【发布时间】：2021-12-06 12:51:55
【问题描述】：

我有一个图表，我在我的 highcharts 图表中放置了一些标签（自定义 html 标签元素）（在我的例子中，每列上方）。问题是：当我调整屏幕大小时，我需要这些来更改它们在屏幕上的 x/y 位置以保持在图表上方，并且在某个点我需要更改这些值以响应移动设备。

是否可以正确地使这些标签具有响应性，以便标签保持在列上方？

【问题讨论】：

标签： angular svg highcharts bar-chart

【解决方案1】：

我可以通过手动更改我的 svgRenderer 标签的 x/y/padding/text 属性来完成此操作。您可以使用这种方法有效地完全更改您的标签。

我有角度并且有一个用于调整屏幕大小的监听器：

this.chart = Highcharts.chart(.....);
// I used a helper method to create the label
this.chart.myLabel = this.labelCreationHelperMethod(this.chart, data);

this.windowEventService.resize$.subscribe(dimensions => {
  if(dimensions.x < 500) { //this would be your charts resize breakpoint
  // here I was using a specific chart series property to tell where to put my x coordinate,
  // you can traverse through the chart object to find a similar number, 
  // or just use a hardcoded number
   this.chart.myLabel.attr({ y: 15, x: this.chart.series[0].points[0].plotX + 20, padding: 8 }); 
  } else {
   this.chart.myLabel.attr({ y: 100, x: this.chart.series[0].points[0].plotX + 50, padding: 15 });
  }
}

//Returns the label object that we keep a reference to in the chart object.
labelCreationHelperMethod() {
     const y = screen.width > 500 ? 100 : 15; 
     const x = screen.width > 500 ? this.chart.series[0].points[0].plotX + 50 : 
        this.chart.series[0].points[0].plotX + 20
     const labelPadding = screen.width > 500 ? 15 : 8;

      // your label
      const label = `<div style="color: blue"...> My Label Stuff</div>`
      return chart.renderer.label(label, x, y, 'callout', offset + chart.plotLeft, chart.plotTop + 80, true)
  .attr({
    fill: '#e8e8e8',
    padding: labelPadding,
    r: 5,
    zIndex: 6
  })
  .add();
 }

【讨论】：