HighchartsReact从js代码将图表下载到PNG/SVG/IMG

nmpmafwu  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(191)

我尝试使用Highcharts React将图表导出为任何类型的图像(jpg,png,svg..)。
我读到过,Highcharts-React创建了另一个用于导出的示例,所以HighchartsRef上没有getSVG()函数。
有没有办法通过代码获取图像?

const App = () => {
  const chartComponent = useRef(null);

  const printChartAsImage = () => {
    // chart to image
    const chart = chartComponent.current.chart;
    console.log(chart.getSVG());
  };

  return (
    <>
      <button onClick={printChartAsImage}>Print visible page</button>
      <div id="element-to-print">
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
          ref={chartComponent}
        />
      </div>
    </>
  );
};
ajsxfq5m

ajsxfq5m1#

您缺少Highcharts exporting模块:

import Highcharts from "highcharts";
import exportingModule from "highcharts/modules/exporting";

exportingModule(Highcharts);

现场演示:https://codesandbox.io/s/highcharts-react-demo-fork-cmmwwg?file=/demo.jsx
文件:https://www.highcharts.com/docs/export-module/export-module-overview

相关问题