Kendo React 将图表保存为图片

Question

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

Answer 1

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

您可以做的是创建一个 CustomChart 组件，它拥有自己的 ref (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, 100, 10]}
      />
      <CustomChart
        categories={[2015, 2016, 2017, 2018]}
        data={[100, 10, 10, 100]}
      />
    </div>
  );
};

export default App;

Kendo React 将图表保存为图片

Kendo React save chart as image

png

download

kendo-ui

reactjs

kendo-react-ui