ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

BizCharts中将图表保存成图片

2021-09-12 13:31:25  阅读:17  来源: 互联网

标签:BizCharts 中将 creatIMg image sales 图表 year download


BizCharts中将图表保存成图片

//引入的依赖
import { Chart, Interval, Tooltip } from 'bizcharts';
import html2canvas from 'html2canvas';
export const List1 = (props: any) => {
//渲染内容代码
 const data = [
    { year: '1951 年', sales: 0 },
    { year: '1952 年', sales: 52 },
    { year: '1956 年', sales: 61 },
    { year: '1957 年', sales: 45 },
    { year: '1958 年', sales: 48 },
    { year: '1959 年', sales: 38 },
    { year: '1960 年', sales: 38 },
    { year: '1962 年', sales: 38 },
  ];
//保存成图片方法
 const download = () => {
    // 图表转换成canvas
    html2canvas(document.getElementById('download') as any).then(function (
      canvas: any,
    ) {
      var img = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream');
      // 创建a标签,实现下载
      var creatIMg = document.createElement('a');
      creatIMg.download = '图表.png'; // 设置下载的文件名,
      creatIMg.href = img; // 下载url
      document.body.appendChild(creatIMg);
      creatIMg.click();
      creatIMg.remove(); // 下载之后把创建的元素删除
    });
  };
return(
 <div style={{ width: '500px' }} id="download">
        <Chart height={300} autoFit data={data}>
          <Interval position="year*sales" />
          <Tooltip shared />
        </Chart>
      </div>
      <Button onClick={download}>download</Button>
      )
}

标签:BizCharts,中将,creatIMg,image,sales,图表,year,download
来源: https://blog.csdn.net/weixin_47583380/article/details/120249619

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有