在 Angular Highcharts 折线图中添加自定义按钮答案

【问题标题】：Add custom buttons in Angular Highcharts Line Chart在 Angular Highcharts 折线图中添加自定义按钮
【发布时间】：2020-04-02 10:23:20
【问题描述】：

我正在尝试在导出属性的 Angular Highcharts 折线图中添加 2 个自定义按钮

exporting: {
    enabled: true,
    buttons: {
        customButton: {
            text: 'Custom Button',
            click: () => {
                alert('You pressed the button!');
            },
        },
        anotherButton: {
            text: 'Another Button',
            click: () => {
                alert('You pressed another button!');
            },
        },
    },
}

但是这 2 个按钮没有显示。这里可能缺少什么逻辑？ Stackblitz

【问题讨论】：

标签： javascript angular highcharts angular-highcharts

【解决方案1】：

您好，认为下面的 sn-p 会对您有所帮助：

chart: {
  type: "line",
  renderTo: "chart",
  events: {
    render(events) {
      let chart = this;

      if (chart.customButton) {
        chart.customButton.destroy();
      }
      chart.customButton = chart.renderer
        .button("custom button", 100, 40, () => {
          console.log("clicked.....");
          chart.exportChart({
            type: "application/pdf",
            filename: "line-chart"
          });
        })
        .add();
    }
  }
}

这里点击按钮，可以实现导出。此处的示例导出 PDF。

演示：

https://stackblitz.com/edit/highcharts-angular-functionality?file=src%2Fapp%2Fstackoverflow%2Fhigh-chart-question%2Fhigh-chart-question.component.ts

https://highcharts-angular-functionality.stackblitz.io/exportcolor

希望这会有所帮助。

【讨论】：

【解决方案2】：

exporting.buttons 是仅用于编辑导出菜单中的按钮的选项：https://api.highcharts.com/highcharts/exporting.buttons

要呈现自定义按钮，请使用 SVGRenderer 功能：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

您可以在 render 回调中添加这些按钮 - 在初始加载和每次重绘后调用：https://api.highcharts.com/highcharts/chart.events.render

【讨论】：

Typescript 有这方面的例子吗？
codesandbox.io/s/angular-wp43k 这是一个使用 Angular 的示例。您应该能够根据自己的要求轻松自定义它。