Kendo React 将图表保存为图像

问题描述

我在下载剑道反应图作为图像时遇到问题，
目前下载有效，但仅适用于我的最新图表（我有六个）
我在 stackblitz
中重新创建了错误 正如您所看到的，每当我尝试下载 2 个图表之一时，下载的图表总是最新的
有什么办法可以解决这个问题吗？

解决方法

问题在于，在您链接的示例中，refContainer 在您的 App 组件内设置了两次。每个图表一次。引用将始终引用第二个图表，因为第二个图表会覆盖 refContainer 最后的值。

您可以做的是创建一个 CustomChart 组件，该组件拥有自己的引用 (refContainer)。通过这种方式，您可以渲染此组件的多个实例，而不会发生 refs 冲突。这也使我们能够摆脱一些用于创建图表的重复代码。

所以你可以这样做：

import * as React from "react";
import {
  Chart,ChartSeries,ChartSeriesItem,ChartCategoryAxis,ChartCategoryAxisItem,exportVisual,} from "@progress/kendo-react-charts";

import { exportImage } from "@progress/kendo-drawing";
import { saveAs } from "@progress/kendo-file-saver";

const CustomChart = ({ categories,data }) => {
  let refContainer = React.useRef(null);

  const onExportVisual = () => {
    const chartVisual = exportVisual(refContainer);
    if (chartVisual) {
      exportImage(chartVisual).then((dataURI) => saveAs(dataURI,"chart.png"));
    }
  };

  return (
    <>
      <button onClick={() => onExportVisual()}>Export as visual element</button>
      <Chart ref={(chart) => (refContainer = chart)}>
        <ChartCategoryAxis>
          <ChartCategoryAxisItem categories={categories} />
        </ChartCategoryAxis>
        <ChartSeries>
          <ChartSeriesItem data={data} />
        </ChartSeries>
      </Chart>
    </>
  );
};

const App = () => {
  return (
    <div>
      <CustomChart
        categories={[2015,2016,2017,2018]}
        data={[10,100,10]}
      />
      <CustomChart
        categories={[2015,2018]}
        data={[100,10,100]}
      />
    </div>
  );
};

export default App;