Как добавить функцию экспорта в пользовательскую кнопку в хайчартах React?

У меня есть этот проект, в котором я пытаюсь реализовать функцию экспорта highchart из-за пределов диаграммы.

Есть ли способ добиться этого? Я использую React highcharts, а форматы загрузки — Jpeg и CSV.

заранее спасибо


reactjs export highcharts react-highcharts
person Abhishek Gangwar    schedule 25.09.2019    source источник
comment
что вы подразумеваете под экспортом функциональности highchar извне?   -  person humanbean    schedule 25.09.2019
comment
загрузка JPEG, CSV хайчарта с кнопок, которые находятся за пределами области чарта.   -  person Abhishek Gangwar    schedule 25.09.2019
comment
Итак, в основном, есть модуль экспорта highchart, который предоставляет нам кнопку меню и различные функции загрузки, такие как JPEG, SVG, PDF. Я пытаюсь добиться того же, но за пределами диаграммы. Есть ли какие-то события, которые могут помочь мне в этом?   -  person Abhishek Gangwar    schedule 25.09.2019
comment
Привет, @abhishek gangwar. Используете ли вы официально поддерживаемую оболочку для React? npmjs.com/package/highcharts-react-official   -  person ppotaczek    schedule 25.09.2019
comment
Вы поняли это? У меня такая же проблема прямо сейчас... не удается найти метод getCSV() в объекте Chart, даже если кнопка контекста работает хорошо и загружает правильный CSV   -  person Yannick    schedule 01.10.2019
comment
@Yannick, я не могу найти этот метод и на объекте диаграммы. Как вы это решили?   -  person Mr. Robot    schedule 23.01.2020

Ответы (1)


arrow_upward
3
arrow_downward

Я нашел решение с использованием функциональных компонентов:

Сначала импортируйте модули:

import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/export-data')(Highcharts);

Затем создайте ссылку на диаграмму:

  const chart = useRef();
....
....
<HighchartsReact ref={chart} highcharts={Highcharts} options={chartOptions} />

Затем создайте метод, подобный этому, инициируемый событием клика:

  const downloadCSV = () => {
    if (chart && chart.current && chart.current.chart) {
      chart.current.chart.downloadCSV();
    }
  };
person Yannick    schedule 01.10.2019
comment
Я получаю Uncaught TypeError: chart.current.chart.downloadPNG is not a function. Почему это могло быть? - person Mr. Robot; 23.01.2020
comment
Ну, DownloadCSV был моим примером. Чтобы загрузить изображение, я использовал chart.current.chart.exportChart(). - person Yannick; 14.02.2020