Angular中Highcharts自定义按钮onClick与符号旋转问题求助

问题背景 #

在Angular项目中使用Highcharts时，自定义了两个导出按钮（change和gotit），遇到以下两个问题：

组件TS文件中的核心代码：

textData = 0; // 组件内声明的变量

chartGenerate() {
  const chartOptions = {
    chart: { /* ... 现有配置 ... */ },
    yAxis: { /* ... 现有配置 ... */ },
    xAxis: { /* ... 现有配置 ... */ },
    series: [ /* ... 现有数据 ... */ ],
    exporting: {
      buttons: {
        contextButton: {
          menuItems: [ /* ... 现有菜单配置 ... */ ]
        },
        change: {
          symbol: 'triangle',
          onclick: function () {
            this.textData += 1; // 此处this指向按钮而非组件，无法正确更新
          }
        },
        gotit: {
          text: this.textData
        }
      }
    }
  };
  // 初始化图表（示例）
  Highcharts.chart('chart-container', chartOptions);
}

问题一：点击change按钮时更新gotit按钮的文本 #

解决思路 #

1. 保存组件实例的上下文（Highcharts按钮的onclick回调中this指向按钮对象，而非Angular组件）；
2. 更新组件的textData变量；
3. 通过图表实例找到gotit按钮，直接修改其文本属性。

修改后的代码： #

textData = 0;

chartGenerate() {
  const that = this; // 保存组件实例的this
  const chartOptions = {
    // ... 其他配置保持不变 ...
    exporting: {
      buttons: {
        contextButton: {
          menuItems: [ /* ... */ ]
        },
        change: {
          symbol: 'triangle',
          onclick: function () {
            // 更新组件的textData
            that.textData += 1;
            // 获取当前图表实例
            const chart = this.chart;
            // 找到gotit按钮并更新文本
            if (chart.exportSVGElements.gotit) {
              chart.exportSVGElements.gotit.attr({
                text: that.textData.toString()
              });
            }
          }
        },
        gotit: {
          text: that.textData.toString()
        }
      }
    }
  };
  Highcharts.chart('chart-container', chartOptions);
}

问题二：将change按钮的triangle符号旋转180度 #

提供两种可行方案：

方案一：自定义SVG符号 #

通过扩展Highcharts的SVG渲染器，定义一个向下的三角形符号：

// 在组件初始化或chartGenerate前执行
Highcharts.SVGRenderer.prototype.symbols.triangleDown = function(x, y, w, h) {
  // 返回旋转180度后的三角形路径（原triangle向上，此处改为向下）
  return ['M', x + w / 2, y + h, 'L', x + w, y, x, y, 'Z'];
};

// 按钮配置中使用自定义符号
change: {
  symbol: 'triangleDown',
  // ... 其他配置 ...
}

方案二：通过CSS样式旋转 #

给change按钮添加自定义类名，然后通过CSS修改符号的旋转角度：

// 按钮配置中添加className
change: {
  symbol: 'triangle',
  className: 'rotate-triangle-btn',
  // ... 其他配置 ...
}

在组件的CSS文件中添加样式：

/* 针对Highcharts按钮的符号元素 */
.highcharts-button-symbol-triangle.rotate-triangle-btn {
  transform: rotate(180deg);
  transform-origin: center center;
}

内容的提问来源于stack exchange，提问作者larabrookk