最近项目上有个需求,是将一些teechart做的图表转换成图片插入自动生成的PDF里,Teechart绘图和如何生成PDF这些这里就不说了,这个任务比较别扭的一点是,图表自动生成,且整个过程中页面不能显示图表。这就有点尴尬了。后来查找资料,最终以页面外(不可见区域)生成图表,转换成图片这种形式实现。话不多说,直接上代码。

页面HTML

 <view style="position:fixed;top:999999999999999999999px;">
<canvas id="canvasWave" width="1200px" height="450px">
This browser does not seem to support HTML5 Canvas.
</canvas>
</view>

JS代码

var canvas = document.getElementById('canvasWave');
var dataURL = canvas.toDataURL();//base64格式图片

js 图表转图片的更多相关文章

  1. 13个JavaScript图表(JS图表)图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  2. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  3. Atitit.js图表控件总结

    Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...

  4. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  5. 一个朋友js图表开发遇到的问题 解决思路c和js

    引言            不求知道一切, 只求发现一件 -- 乔治·西蒙·欧姆 附注:那些存在于梦幻中的事迹,那些儿时梦中的人物,每每看起,都觉得 .哎 .... 岁月 ... 一直在努力 ...  ...

  6. chart.js图表库案例赏析,饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  7. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  8. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  9. 求剁手的分享,如何简单开发js图表

    前段时间做的一个项目里需要用到js图表,在网上找了下,大概找到了highcharts.fusioncharts这些国外产品. 因为都收费,虽然有盗版,我也不敢用,万一被找上们来就砸锅卖铁了要.自己写j ...

随机推荐

  1. 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理

    [原创]分布式之缓存击穿   什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查 ...

  2. HttpClient的Post和Get訪问网页

    一.基础JAR包 Mavenproject下pom.xml需配置的jar包 <dependencies> <dependency> <groupId>junit&l ...

  3. Getting console.log output with Selenium Python API bindings

    持久化存储 Getting console.log output from Chrome with Selenium Python API bindings - Stack Overflow http ...

  4. LuoguP4246 [SHOI2008]堵塞的交通

    https://zybuluo.com/ysner/note/1125078 题面 给一个网格,每次把相邻两点连通性改为\(1\)或\(0\),询问两点是否联通. 解析 线段树神题... 码量巨大,细 ...

  5. springmvc的jar包

     <!-- spring框架的的组件构成(springFramework)--> 一.核心部分Core Container 1.1 spring-core,spring-beans 提供控 ...

  6. CSS小代码汇总整理

    /**实现斑马线的表格*/table.flexme tbody tr:nth-child(2n){background-color:#D6E7FC;} /*返回偶数序的子元素*/table.flexm ...

  7. url参数为数组

    //url中state参数为数组 ?baseline_id=12&version_id=34&state[]=complete&state[]=hangup&state ...

  8. android GPS 定位,取位置信息

    现在很多app ,需要取位置信息,所以我也做了一个模块用来取位置信息:   加入位置服务所需的权限: <uses-permission android:name="android.pe ...

  9. 配置Oracle数据库的开机自启动

    每当数据库服务器重启后,都要重新启动数据库的监听和实例,特别是在服务器断电重启.例行维护性的场景下.能否像Windows服务器一样,让实例和监听随着服务的启动而启动呢?答案当然是肯定的,我们可以利用O ...

  10. C# 文件操作【转】

    本文也收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...