canvas

作者：zccst 我自己用过fusioncharts和highchart。 jQuery插件有： TufteGraph flot js charts jqchart elycharts jquery visualize plugin 普通的： 1 highcharts http://www.highcharts.com/ Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。 2 jscharts http://www.jscharts.com/ JS Chart是需要一些简 单或无需手工书写编码的基于Javascript的免费图表生成器。使用JS Chart可以很简单很容易的完成你的生成图表任务，因为你只需要使用客户端脚本(即浏览器端)，无需多余的插件或服务器端模块。你只需要准备好JS Chart脚本、包含图表数据的XML或Javascript数组。 3 fusioncharts http://www.fusioncharts.com/ FusionCharts是一个Flash的图表组件，它可以用来制作数据动画图表，其中动画效果用的是Adobe Flash 8

echarts配置项太多了，还是一点点积累吧~~~~~ 当然前提条件还是得老老实实看echarts官方文档 ： https://echarts.baidu.com/ 今天主要就介绍下我在工作中通过echarts实现的微信小程序的折线图 Demo地址： https://gitee.com/v-Xie/echartsDemo.git 效果嘛如下： 通过此图分析得出需要实现以下几点：（主要配置代码请看后面部分） 1.标题(折线图) -title 　　需：颜色，文本，位置 2.图例（财运，感情，事业） -legend 　　需：图例颜色，图标形状，图标文本，各图标间隔 3.横纵坐标 　　需：　》》横坐标 -xAxis 　　　　　　 刻度【周一，周二...周日】， -axisLabel 　　　　　　　分割线　 -splitLine 》》纵坐标 -yAxis: 　　　　　　 刻度【大吉，...凶】， -axisLabel 　　　　　　　分割线　 -splitLine 4.数据项- series 开发吧： 首先下载echarts 进行中： 目录 line/index.wxml <!--index.wxml--> < view class = "container"> < view class = 'echart_wrap'> < ec-canvas id = "mychart" canvas-id

html2canvas.js 这个js有个强大的功能，就是能将html 对应的dom生成canvas。 这样，我们就可以通过生成的canvas转化成 base64 图片，从而实现截屏功能； 核心代码如下（同时也解决了一个bug，生成的图片不高清）： //以下乘以3是将画布和画布的内容放大3被，从而使生成的图片变清晰 var canvas = document.createElement("canvas"); canvas.height = $(window).height()*3 canvas.width = $(window).width()*3 var context = canvas.getContext("2d"); //然后将画布缩放，将图像放大两倍画到画布上 context.scale(3,3); html2canvas(document.getElementById('view'), { canvas: canvas, onrendered: function(canvas) { var _h = $(window).height()*2/3; var _w = $(window).width()*2/3; _src = canvas.toDataURL('image/png'); var img = new Image(); img.src = _src; img

<canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> 　　 var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0],[200,200]],color:"orange"}, {locations:[[0,400],[100,300],[200,400]],color:"yellow"}, {locations:[[100,300],[200,200],[300,300],[200,400]],color:"green"}, {locations:[[300,100],[200,200],[300,300]],color:"blue"}, {locations:[[300,100],[400,0],[400,200],[300,300]],color:"indigo"}, {locations:[[200,400],[400,400],[400,200]],color:"purple"} ]; var oCanvas = document.getElementById("canvas"); var ctx = oCanvas

1、使用html2canvas 存在的问题： 不同的机型绘制位置不同的问题。 这个主要因为Html动态设置了html的dpr。（dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问题）。 但是在绘制canvas时最好屏蔽这个属性。这个属性确定会导致html2canvas生成的canvas的尺寸不同。导致重新在此canvas里绘制图片时，在不同机型上显示的位置有出入。 使用canvas时一定要注意toDataUrl的跨域问题 2、点击保存图片 目前只有H5的，download方法。但是在手机上通用性不强。 只有和客户端交互的方式来保存图片。 3、生成2维码图片(qr_code) 4、长按保存图片（直接生成图片覆盖在Html，浏览器会自动弹出是否保存图片） 来源： https://www.cnblogs.com/qdcnbj/p/10320007.html