最近项目上有个需求,是将一些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. 【Aladdin Unity3D Shader编程】之二 光照模型(一)

    光照模型 光照模型就是一个公式,使用这个公式来计算在某个点的光照效果. 在标准光照模型里面,我们把进入摄像机的光分为下面四个部分: 自发光 类似生活中的萤火虫等自己能够发光 高光反射 类似生活中的镜子 ...

  2. 第二章 在Html中使用JavaScript

    https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...

  3. NodeJs函数式编程

    虽然标题是NodeJS函数式编程,但实际上NodeJS 是一个框架,不是一种语言,其采用的语言是 JavaScript.而JavaScript是一种典型的多范式编程语言,算不上是函数式语言,但它有函数 ...

  4. leetcode快排相关

    leetcode:75颜色分类(3way).215数组中的第K个最大元素(normal) 3way private static void quick3waySort(int[] arr, int l ...

  5. Ruby   离奇方法

    send https://ref.xaio.jp/ruby/classes/object/send find https://ref.xaio.jp/ruby/classes/enumerable/f ...

  6. ie8 js编译器对象为空或不是对象的一个小问题

    昨天在遍历json串的时候碰到了如下图所示的问题,除ie8以下版本的浏览器运行都是正常的, 部分代码如下: 1 var Workmodel=function(){ 2 model_json=[ 3 { ...

  7. 利用hexo来配合nginx来打造属于自己的纯静态博客系统

    什么是静态网站生成器?顾名思义,就是以最快的速度生成一个高可用的web页面,我们知道Django作为一款非常流行的框架被广泛应用,但是部署起来实在是太麻烦了,各种命令各种配置,动态页面必然要涉及数据库 ...

  8. [ POI 2011 ] Dynamite

    \(\\\) \(Description\) 一棵\(N\)个节点的树,树上有\(M\)个节点是关键点,选出\(K\)个特殊点,使得所有关键点到特殊点的距离中最大的最小,输出最大值最小为多少. \(N ...

  9. html——细线表格

    细线: 1.table表格设置背景色 2.table中设置单元格距离 3.tr标签设置另外一种背景色 <!DOCTYPE html> <html> <head lang= ...

  10. vim之tags

    好长时间没有上来更新了, 今天趁老板不再上来休闲一下. 本章要说的是和vim的tags相关的内容. 之所以在跳转之后就说明tags是因为这个功能相当的重要和实用. 好的东西自然是需要提前分享的. 首先 ...