[Web Chart系列之六] canvas Chart 导出图文件

最新推荐文章于 2023-11-07 17:36:30 发布
最新推荐文章于 2023-11-07 17:36:30 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： 130-Web语言 Web Chart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oscar999/article/details/8696534
版权

介绍

使用SVG绘制的图形可以导出为svg 格式的文件，使用浏览器等可以查看。

是否可以导出为png, gif 格式的文件呢？ 当然是可以。

只是在 web 直接创建和操作文件是不建议的，而且存在各浏览器兼容的问题， 比如IE使用ActiveX来创建新文件。

正确的做法，是在web server 端传送文件到web 端， 不过对于web chart 来说， 好像又多绕了一圈。

这里的介绍为了简单，没有引入web Server.

既然使用的是Canvas,则本文的内容是针对支持HTML5的浏览器而言的。


Canvas 产生图，并自动下载

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC &#
了解本专栏 订阅专栏 解锁全文 超级会员免费看
oscar999
关注
专栏目录
订阅专栏
chart图表导出到excel
09-08
chart图表导出到excel
将使用到的echarts图表导出为一张图片
weixin_46682277的博客
11-18 564
将使用到的echarts图表导出为一张图片。
对网页进行截图
lilovfly的专栏
07-22 443
在项目中，偶尔需要把hightchart做的图导出来做成word，这个问题之前我是把hightchart生成图的svg传递到后台，通过svg生成图片把图片生成，最后把她放到word中做成导出的word，但是对于echart做的图我就有点无能为力了，今天没事，想到一个词就是如何截取web的截图，这个词百度查看发现通过phantomjs抓取指定网站的截图，这个倒是个好的方式，比起解析页面的内容这种要简
vue-chartjs-exporter:将由vue-chartjs创建的图表导出为PDF文件
05-18
vue-chartjs-exporter 将由创建的图表导出为PDF文件。 演示。 在继续之前，请先阅读下面的“需求”部分，因为其中包含重要信息，您可以从中寻找更简单的解决方案 :expressionless_face: 。 查看以获得更简单但不一定免费的解决方案。 安装 npm i vue-chartjs-exporter 用法 导入vue-chartjs-exporter ： import Exporter from "vue-chartjs-exporter" ; 获取要导出的图表： let bar = document . getElementById ( "bar" ) ; let radar = document . getElementById ( "radar" ) ; let pie = document . getElementById ( "pie" ) ; let area = docum
js绘图 highcharts，导出
leon
11-30 1803
<br />http://www.highcharts.com/<br /> <br />Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, c
Export-CanvasJS-Chart-Data-as-CSV:允许您将CanvasJS图表数据导出为CSV
05-10
这是CanvasJS Charts的插件，可用于将CanvasJS Chart的数据导出并保存为CSV。 CanvasJS CanvasJS是完全为高性能数据可视化而构建的，可以在几毫秒内渲染数百万个数据点。 图表很漂亮，API使用非常简单。 如何使用...
Export-CanvasJS-Chart-Data-as-JSON:允许您将CanvasJS图表数据导出为JSON
05-10
这是CanvasJS Charts的插件，允许您将CanvasJS Chart的数据导出并保存为JSON。 CanvasJS CanvasJS是完全为高性能数据可视化而构建的，可以在几毫秒内渲染数百万个数据点。 图表很漂亮，API使用非常简单。 如何使用...
vue-orgchart库来创建组织架构图demo源码，支持导出png或pdf，支持平移拖动和缩放.zip
最新发布
05-24
vue-orgchart库来创建组织架构图demo源码，支持导出png或pdf，支持平移拖动和缩放 使用依赖： 1. vue.js：Vue.js的核心库。 2. vue-orgchart.min.js：vue-orgchart库的核心文件，用于生成组织架构图。 3. ...
基于vue-orgchart库来创建组织架构图demo源码.zip
06-08
基于vue-orgchart库来创建组织架构图demo源码： ...2. vue-orgchart.min.js：vue-orgchart库的核心文件，用于生成组织架构图。 3. html2canvas.min.js：一个JavaScript库，用于将HTML转化为canvas，从而可以导出图像。
自动生成chart源码，js的canvas绘制chartchart.zip
09-25
自动生成chart源码，js的canvas绘制chartchart.zip
使用chart.js生成图表
小木头的专栏
05-25 2455
    chart.js是一个开源的用于生成图表的js库，支持柱形图、曲线图、折线图、散点图、极地图、雷达图、环形图和饼图，可以在一张图里定义一个或两个y轴单位，也可以在一张图里同时出现柱形图和折线/曲线图，它对时间单位的支持也不错，如果x轴是时间单位，它可以灵活展现各种时间日期格式，并灵活设置单位长度。下面我将通过几个例子说明一下chart.js的使用过程：   官方文档：http://w...
学习使用JS实现Echarts的图表保存为图片功能：saveAsImage和getDataURL
徊忆羽菲
11-07 2451
实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。另外Echarts提供一个接口getDataURL,通过它可以导出图表图片，返回一个 base64 的 URL。//base64转blob。
JS实现Echarts的图表保存为图片功能
wml00000的博客
06-09 1万+
文章目录需求分析开发准备实现思路效果图参考链接 需求分析 实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。。。 开发准备 通过查看Echarts网站，可以很快找到其自带的toolbox配置项，在f...
将Echarts图表导出为图片的三种方式
热门推荐
慢慢manman的博客
12-30 2万+
【代码】将Echarts图表导出为图片的三种方式。
微信小程序精品组件：chartjs：饼图，折线图，bar，point-styles
快乐搞内核代码
07-18 3559
使用说明 安装 npm install gulp build 生成/Chart.js-master/dist/Chart.min.js文件 使用压缩合并版本 打开 dev/page/canvas/chart.js 注释 import Chart from ‘../../Chart.js-master/src/chart’ 开启 import Chart from ‘../../Cha...
html2canvas图表没有,html2canvas Chart.js图表​​未呈现
05-23
如果您使用的是`html2canvas`库...在上面的示例中，我们使用`chartjs-node-canvas`库创建了一个`Chart.js`图表，然后将其导出为图像。您可以将此代码嵌入到您的项目中，以便在后端生成`Chart.js`图表并将其导出为图像。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值