reactjs - Kendo React 将图表保存为图像

Question

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

Answer 1

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

您可以做的是创建一个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;