如何在Highcharts库中使用render函数重绘图表，避免永久循环

cgvd09ve 于 2023-10-20 发布在 Highcharts

关注(0)|答案(2)|浏览(230)

我正在调整render函数中dataLabels的一些值，但我需要重新绘制一个图表来应用这些更改。下面是我的render函数：

render: function () {
  const points = this.series[0].points;
          
  for (var i = 0; i < points.length; i++) {

    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel
      const dataLabel2 = (points[i + 1] as any).dataLabel

      if ((dataLabel1.x + dataLabel1.width) >= dataLabel2.x) {

        dataLabel1.attr({
          y: dataLabel1.y - (dataLabel1.height + 2),
          fill: points[i].color
        });
 
      }
    }
  }
}

但在图表的宽度改变之前，什么都不会改变。因此，我认为更改需要再次呈现图表才能应用。
我试着这样重新绘制我的图表：

render: function () {
  const points = this.series[0].points;
          
  for (var i = 0; i < points.length; i++) {

    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel
      const dataLabel2 = (points[i + 1] as any).dataLabel

      if ((dataLabel1.x + dataLabel1.width) >= dataLabel2.x) {

        dataLabel1.attr({
          y: dataLabel1.y - (dataLabel1.height + 2),
          fill: points[i].color
        });
 
      }
    }
  }

  this.redraw();
}

但这会导致无限渲染循环。我如何在这里重新绘制图表，或者是否有其他方法来应用更改？

highcharts

来源：https://stackoverflow.com/questions/77021454/how-to-redraw-a-chart-in-render-function-avoiding-eternal-looping-in-highcharts

2条答案

按热度按时间

koaltpgm1#

您可以有条件地重绘图表，例如：

let allowChartRedraw = true;

Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        if (allowChartRedraw) {
          allowChartRedraw = false;

          this.redraw();

          allowChartRedraw = true;
        }
      }
    }
  },
  ...
});

但是，你可能不需要这样做。使用attr方法作为数据标签应该就足够了，请查看这个示例：https://jsfiddle.net/BlackLabel/tyL96pxd/

赞(0）回复(0）举报 2023-10-20

jaxagkaj2#

我认为你不需要在render函数中调用这个.redraw（）。您可以使用数据标签的update方法来调整图表中数据标签的位置和填充颜色，并立即反映这些更改。像这样的东西应该会有用，

render: function () {
  const points = this.series[0].points;
          
  for (var i = 0; i < points.length; i++) {

    if (i < points.length - 1) {
      const dataLabel1 = (points[i] as any).dataLabel
      const dataLabel2 = (points[i + 1] as any).dataLabel

      if ((dataLabel1.x + dataLabel1.width) >= dataLabel2.x) {
        dataLabel1.update({
          y: dataLabel1.y - (dataLabel1.height + 2),
          color: points[i].color // Use 'color' instead of 'fill' to set the text color
        });
      }
    }
  }
}

赞(0）回复(0）举报 2023-10-20

我来回答

如何在Highcharts库中使用render函数重绘图表，避免永久循环

2条答案

相关问题

热门标签

最新问答