如何解决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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。