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

Question

我正在尝试在导出属性的 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!');            },        },    },}但是这两个按钮没有显示。这里可能缺少什么逻辑？

Answer 1

您好，认为下面的代码片段会对您有所帮助：

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。

Answer 2

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

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

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