Kendo React 將圖表保存為圖像

Question

我在下載劍道反應圖表作為圖像時遇到問題，
目前下載有效，但僅適用於我的最新圖表（我有六個）
我在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;