Добавьте пользовательские кнопки в Angular Highcharts Line Chart

Question

Я пытаюсь добавить 2 пользовательские кнопки в Angular Линейный график Highcharts в свойстве экспорта

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 кнопки не отображаются. Что может быть здесь недостающим логи c? Stackblitz

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.

Демо:

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

Надеюсь, это поможет.

Answer 2

Кнопки exporting.x позволяют редактировать кнопки только в меню экспорта: 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