在 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