整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html5Canvas的知识点，是开发的必备技能，在实际工作中也常常会涉及到。
最近熬夜总结html5Canvas相关的知识点，大家一起看一下吧：
Canvas使用的场景有：1，动画；2，H5游戏；3，图表。
效果动画，加载Loading:
H5游戏效果：
对于Canvas需要掌握：
Canvas坐标体系
画直线，矩形和原型
beginPath和closePath
描边和填充样式
Canvas中的图形变换，渐变，文字和图片
Canvas中的图形变换
图形变换都是针对坐标系来说的：
save和restore
用来保存和恢复上下文的环境ctx，一般成对出现
Canvas中的渐变
(xStart,yStart)是线段的起点，(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);
(xStart,yStart)是第一个圆的原心，radiusStart是第一个圆的半径，(xEnd,yEnd)是第二个圆的原心，radiusEnd是第二个圆的半径
第一圆到第二个圆之间的颜色呈现渐变。
Canvas中的文字
描边文字：ctx.strokeText(text,x,y)
填充文字：ctx.fillText(text,x,y);
设置字体样式：ctx.font
设置垂直对齐方式：ctx.textBaseline
Canvas图片
绘制图片3种方法
在image加载完成之后绘制：
示例：
var img = new Image();img.src = 'logo.png';img.onload = function() { ctx.drawImage(img,0,0,40,40,0,0,80,80);}Canvas绘制
Canvas图形画刷
ctx.createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的填充。
type取值:
Canvas像素操作
var imageData = ctx.getImageData(x,y,w,h)返回的是一维数组：[r1,g1,b1,a1,r2,g2,b2,a2...]ctx.putImageData(imageData,x,y)把imageData放在(x,y)处ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只显示（dirtyX,dirtyY）处的宽dirtyW,dirtyH的区域Canvas阴影绘制
Canvas剪辑区域
Canvas绘制曲线
狐线：
context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圆心(x,y) 半径radius从starAngle到endAngleanticlockwise代表是否逆时针方向生成工具
Canvas Quadratic Curve Example
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
二次样条曲线：
context.quadraticCurveTo(qcpx,qcpy, qx,qy)贝塞尔曲线：
context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)清除(x,y)点起， 宽width,高height的区域，用于重新绘制
离屏技术是什么：通过在离屏Canvas中绘制元素，再复制到显示Canvas中，从而大幅提高性能的一种技术。
使用离屏技术：
离屏技术：
一个Canvas中的图形绘制到另一个Canvas方法：
ctx.drawImage(canvas,x,y),该方法把canvas绘制在(x,y)处ctx.drawImage(canvas,x,y, w,h),该方法把canvas绘制在(x,y)处，并缩放为宽w,高hctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh)，该方法把canvas中（sx, sy）处的宽sw,高sh的区域，绘制到(dx,dy)处，并缩放为宽dw, 高dh对canvas插件的相关了解
什么是Canvas插件，掌握Chart.js插件，了解Chartist.js和HighCharts.js插件
（图表）Chart.js插件：https://www.chartjs.org/
Chartist.js插件是一个简单的响应式图表插件：支持SVG格式（http://gionkunz.github.io/chartist-js/）
HighCharts.js插件：方便快捷的HTML5交互性图标库：https://www.highcharts.com/
Chartist.js插件与HighCharts.js插件
响应式布局，它的用户体验友好，响应式网站可以根据不同终端，不同尺寸和不同应用环境，自动调整界面布局，展示内容，提供非常好的视觉效果。响应式布局就是一个网站能够兼容多个终端
示例：
<style>#canva { border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 绘制宽高200的canvas</div>在开始绘图时，先要获取Canvas元素的对象，在获取一个绘图的上下文。
获取Canvas对象 ,使用document对象的getElementById()方法获取。
var canvas = document.getElementById("canvas")可以使用通过标签名称来获取对象的getElementsByTagName方法使用getContext()方法来获取
var context = canvas.getContext("2d")context.font="98px 黑体"; // 文字样式context.fillStyle="red"; // 文字颜色context.textAlign = "center"; // 文字对齐方式// 绘制文字context.fillText("达达前端"，100, 123, 234);绘制图像：
使用drawImage()方法可以将图像添加到Canvas画布中，绘制一幅图像，需要有三个重载的方法：
使用：
drawImage(image, x, y) // 在画布上定位图像// 方法在画布上绘制图像、画布或视频。// 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。drawImage(image, x, y, width, height)// 在画布上定位图像，并规定图像的宽度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切图像，并在画布上定位被剪切的部分参数：
参数描述image规定要使用的图像，画布或视频sourceX开始剪切的x坐标位置sourceY开始剪切的y坐标位置sourceWidth被剪切图像的宽度sourceHeight被剪切图像的高度destX在画布上放置图像的 x 坐标位置destY在画布上放置图像的 y 坐标位置destWidth要使用的图像的宽度destHeight要使用的图像的高度
插入图像：
function Draw() { // 获取canvas对象 var canvas = document.getElementById("canvas"); // 获取2d上下文绘图对象 var context = canvas.getContext("2d"); // 使用Image()构造函数创建图像对象 var newImg = new Image(); // 指定图像的文件地址 newImg.src = "../images/dadaqianduan.jpg"; newImg.onload = function () { // 左上角开始绘制图像 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250, 100, 150, 200); context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120); }}在Canvas中绘制文字“达达前端”:
// canvas 宽高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas { border: 2px solid #ccc;}</style><script> // 获取canvas var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 设置字体 context.font="98px 黑体"; // 填充 context.fillStyle="#036"; // 文本水平位置 context.textAlign="center"; // 执行绘制 context.fillText("达达前端",100, 120, 200);</script>两个方法：
绘制矩形边框，使用strokeStyle方法：
// 绘制矩形边框strokeRect(x,y, width, height);填充矩形区域，使用fillRect()方法：
// 填充矩形区域fillRect(x,y,width,height);绘制矩形
// 绘制矩形function drawRect() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 描边 context.strokeStyle = "#000"; // 线条宽度 context.lineWidth = 1; // 矩形边框 context.strokeRect(50,50, 150, 100); // 填充 context.fillStyle="#f90"; // 矩形 context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);使用clearRect方法，可以擦除指定的矩形区域：
// 擦除指定的矩形区域context.clearRect(x,y,width,height)在实际开发中，画布是默认300*150的大小。
示例：
// 为画布设置边框canvas { border: 1px solid #ccc;}// 准备画布，默认是300*150// 设置画布的大小<canvas width="1200" height="800"></canvas>// 准备绘制工具<script>// 获取元素var myCanvas = document.querySelector('canvas');// 获取上下文，绘制工具箱var ctx = myCanvas.getContext('2d');// 移动画笔ctx.moveTo(100,100);// 绘制直线，轨迹ctx.lineTo(200,100);// 描边ctx.stroke()向 HTML5 页面添加 canvas 元素
// 规定元素的 id、宽度和高度<canvas id="myCanvas" width="200" height="100"></canvas>图形绘制
需要理解些概念：
设置样式
矩形绘制
圆弧绘制
绘制文本
绘制图片
坐标变换
创建绘图路径
使用方法：beginPath()和closePath()，分别表示开始一个新的路径和关闭当前的路径
closePath方法关闭当前路径
绘制网格，网格大小
var grid = 10;// 画多少条x轴方向的线，横向的条数，画布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 画布宽高ctx.canvas.widthctx.canvas.height// 网格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 总线条var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) { ctx.beginPath(); ctx.moveTo(0, i*gridSize-0.5); ctx.lineTo(canvasWidth, i*gridSize-0.5); ctx.strokeStyle='#eee'; ctx.stroke();}// 画多少条y轴方向的线var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) { ctx.beginPath(); ctx.moveTo(i*gridSize-0.5,0); ctx.lineTo(i*gridSize-0.5,canvasHeight); ctx.strokeStyle='#eee'; ctx.stroke();}绘制坐标系，确定圆点，确定离画布旁边的距离，确定坐标轴的长度，确定箭头的大小，绘制箭头填充。
// 绘制坐标系var space = 20;var arrowSize = 10;// 画布宽高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐标系var x0 = space;var y0 = canvasHeight - space;// 绘制x轴ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭头ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 绘制y轴ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭头ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 绘制点var coordinate = { x: 146, y: 356}// 点尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();arc方法和rect方法
arc创建一个圆形，rect创建一个矩形，最后调用stroke()方法和fill()方法
// 圆形context.arc(100,100,30,0,Math.PI*2,true);使用beginPath()方法可以新创建一个子路径，closePath()方法用来闭合路径的。
绘制两条直线
function DrawLine() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // 创建绘制过程 context.beginPath(); context.moveTo(50,50); context.lineTo(120,120); context.lineTo(120,60); context.closePath(); context.strokeStyle="#000"; // 执行绘制 context.stroke();}如果不用beginPath()方法，绘制图形时不再创建子路径，第一次的图形在执行过程中会被绘制填充两次。
图形组合
属性 globalCompositeOperation 设置如何在画布上组合颜色
12中组合类型：
值说明copy只绘制新图形，删除其他所有内容darker在图形重叠的地方，颜色由两个颜色值相减后决定destination-atop已有的内容只在它和新的图形重叠的地方保留，新图形绘制在内容后destination-in在新图形和已有画布重叠的地方，已有内容都保留，所有其他内容成为透明destination-out在新图形和已有内容不重叠的地方，已有内容保留所有其他内容成为透明destination-over新图形绘制于已有内容的后面lighter在图形重叠的地方，颜色由两种颜色值的叠加值来决定source-atop只在新图形和已有内容重叠的地方才绘制新图形source-in在新图形和已有内容重叠的地方，新图形才会被绘制，所有其他内容成为透明source-out只在和已有图形不重叠的地方绘制新图形source-over新图形绘制于已有图形的顶部xor在重置和正常绘制的其他地方，图形都成为透明
绘制曲线
// 圆形，曲线arc(x, y, radius, startAngle, endAngle, counterclockwise);<style>// 画布背景颜色#canvas { background: #000;}</style>// 画布宽度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 开始 context.beginPath(); // 绘制圆形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 关闭 context.closePath(); // 填充颜色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>如果使用css设置宽高，画布会按照300*150的比例进行缩放，将300*150的页面显示在400*400的容器中。
// 设置画布宽度var cx = canvas.width = 400;var cy = canvas.height = 400;使用js动态设置宽高。
建议使用HTML中的width和height，或者js动态设置宽高
创建一个canvas标签，第一步：
// 获取这个canvas的上下文对象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');方法：
辅助线绘制弧线：arcTo() 方法
语法：
// 辅助线绘制弧线arcTo(x1, y1, x2, y2, radius)arcTo()方法绘制一条弧线
代码：
// 绘制一条弧线function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动点 context.moveTo(80, 120); // 绘制线条 context.lineTo(150, 60); context.lineTo(180, 130); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; context.lineWidth=2; context.stroke(); context.beginPath(); context.moveTo(80,120); context.arcTo(150,60,180,130,50); context.strolkeStyle="rgba(255,135,0,1)"; context.stroke();}quadraticCurveTo()方法：
quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制点的坐标，x, y描述了曲线的终点坐标bezierCurveTo()方法：它是应用于二维图形应用程序的数学曲线。
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一个控制点的坐标 // cp2X, cp2Y 表示第二个控制点的坐标 // x, y表示曲线的终点坐标绘制曲线：
function draw() { // 绘制曲线 var canvas = document..getElementById('canvas'); var context = canvas.getContext('2d'); // 开始绘制 context.beginPath(); // 移动 context.moveTo(100,180); // 连线 context.lineTo(110,80); context.moveTo(260,100); context.lineTo(300,200); // 描边 context.strokeStyle="rgba(0,0,0,0.4)"; // 设置宽度 context.lineWidth=3; context.stroke(); context.beginPath(); context.moveTo(100,180); // 绘制贝济埃曲线 context.bezierCurveTo(110,80,260,100,300,200); // 设置宽度 context.lineWidth = 3; context.strokeStyle="rgba(255,135,0,1)"; context.stroke();}var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 画布宽度200var canX = canvas.width = 200var canY = canvas.height = 200;// 开始绘制context.beginPath();// 四分之一圆context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();设置阴影，shadowBlur -context.shadowBlur = 20
gradient.addColorStop(stop,color)使用三种方法插入图像
function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // image实例 var newImg = new Image(); newImg.src='../images/dada.jpg' // 指定图像的文件地址 newImg.onload = function(){ // 绘图 context.drawImage(newImg, 0, 0); context.drawImage(newImg, 250,100, 150,200); context.drawImage(newImg, 90,80,100,100,0,0,120,120); }}在插入图像之前，需要考虑图像加载的时间，如果图像没加载完成就已经执行drawImage()方法，就不会显示任何图片。
提供了两种渐变的创建的方法：
// 创建线性渐变createLinearGradient()方法// 创建径向渐变createRadialGradient()方法设置渐变颜色和过渡方式
语法如下：
addColorStop(offset, color);function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 创建渐变对象，线性渐变 var grd = context.createLinearGradient(0,0,300,0) // 设置渐变颜色 grd.addColorStop(0, '#xxx'); // 设置颜色 grd.addColorStop(1, '#xxx'); // 设置颜色 // 将填充样式设置为线性渐变对象 context.fillStyle = grd; context.fillRect(0,0,300,80);}function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 径向渐变 var grd = context.createRadialGradient(50,50,0,100,100,90); // 设置渐变颜色以及方式 grd.addColorStop(0,'#xxx'); grd.addColorStop(1,'#xxx'); context.fillStyle = grd; context.beginPath(); // 圆形 context.arc(100,100,90,0,Math.PI*2,true); context.fill();}线帽属性：lineCap，表示指定线条的末端如何绘制值：lineCap: butt, round, square，当线条具有一定的宽度才能表现出来。
butt// 定义了线段没有线帽round// 定义了线段的末端为一个半圆形的线帽square// 定义了线段的末端为一个矩形的线帽线条的连接属性lineJoin，用于两条线条到的连接方式：
miter两条线段的外边缘一直延伸到它们相交，属性miterLimit是用来描述如何绘制两条线段的交点，是表示延伸长度和线条长度的比值。
默认为10，只有miter使用时有效
lineJoin = [value];round // 两条线段的外边缘应该和一个填充的弧结合bevel // 两条线段的外边缘应该和一个填充的三角形相交语法如下：
createPattern(image, repetitionStyle)function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') var img = new Image(); // 使用Image()构造函数创建图像对象 img.src='../images/xxx' // 指定图像的文件地址 img.onload = function() { // 绘图模式 var ptrn = context.createPattern(img, 'repeat'); // 填充样式 context.fillStyle = ptrn; // 填充矩形 context.fillReat(0,0,500,200); }}移动变化：
// 移动translate(dx,dy);// 绘制function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContext('2d') // 设置移动偏移量 context.translate(200, 200); // 绘制一个圆形 ArcFace(context);}// 绘制一个圆形function ArcFace(context) { // 绘制一个圆形边框 context.beginPath(); // 绘制圆形 context.arc(0,0,90,0,Math.PI*2,true); // 线宽 context.lineWidth=5; // 描边 context.strokeStyle='#f90'; context.stroke(); // 绘制 context.beginPath(); context.moveTo(-30, -30); context.lineTo(-30, -20); context.moveTo(30, -30); context.lineTo(30, -20); context.moveTo(-20, 30); // 曲线 context.bezierCurveTo(-20, 44, 20, 30, 30, 20); context.strokeStyle='#000'; context.lineWidth=10; context.lineCap = 'round'; // 笑脸 context.stroke();}缩放变换，语法如下：
scale(sx, sy);// sx为水平方向上的缩放因子，sy为垂直方向上的缩放因子// 示例function draw() { var canvas = document.getElementById('canvas') var context = canvas.getContent('2d') // 移动 context.translate(200,200); // 缩放 context.scale(0.5,0.5); ArcFace(context);}旋转变换：
rotate(angle)// 旋转例子function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d') context.translate(200,200); // 旋转 context.rotate(Math.PI/6); context.scale(0.5, 0.5) ArcFace(context)}矩形变形，语法如下：
transform(m1x,m1y,m2x,m2y,dx,dy); // 移动，缩放，旋转1. 移动translate (dx, dy)2. 缩放scale (sx,sy)3. 旋转rotate (A)己要写一个饼图费时费力，用canvas虽然可以实现，但是很难达到预期的效果，网上有很多开源的图表组件库，我们可以在这个基础上进行二次开发，方便而且省时省力，也可以写出很酷炫的效果！
01 echarts
地址：https://echarts.apache.org/
推荐：★★★★★
简介：ECharts，一个强大的、交互式的浏览器图表和可视化库。是我用得最多的图表库了。丰富的图表库，很多用户把自己的模板都上传在这里，多达几万个图表模板！
02 highcharts
地址：https://www.highcharts.com.cn/
推荐：★★★★★
简介：兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库！
03 chart.js
地址：https://www.chartjs.org/
推荐：★★★★
简介：Chart.js 是由社区共同维护的开源项目,欢迎任何人参与! 8 种图表类型 为你的数据提供 8 种可视化展现方式,每种方式都具有动态效果并且可定制。在所有现代浏览器（IE11+）上都有高效的绘图效率。
04 Antv
地址：https://antv.vision/zh
推荐：★★★★★
简介：Antv 是蚂蚁集团全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。它是一个庞大的图表生态系统。不单单包含基础图表组件。其中的G2更适合我们今天介绍的图表库。
05 bizCharts
地址：https://antv.vision/zh
推荐：★★★★
简介：BizCharts是阿里通用图表组件库，致力于打造企业中后台高效、专业、便捷的数据可视化解决方案，基于 G2与G2Plot封装的React图表库，已经历阿里复杂业务场景长达三年的洗礼，在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现。缺点就是没有vue版的。
06 three.js
地址：https://threejs.org/
推荐：★★★★★
简介：3D图表的首选，是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
07 datav
地址：http://datav.jiaminghi.com/
推荐：★★★★★
简介：含有react和vue版的，搭配echarts一起使用简直完美！它通过组合不同的配置项可以达到多变的视觉效果。大部分组件设置宽高或配置简单的数据即可使用。有三个demo，不过我看很久没维护了。
nyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。（重要推荐：AnyChart已加入在线订购，超值特价低至￥368起！）
维恩图是可视化集的关系的最强大的工具。也就是说，该图表类型可以很好地显示集的交叉程度及其嵌套。
标签云（也称为词云，或加权列表）是一种数据可视化，能够帮助在视觉上以吸引人的方式展示文本数据。尤其广泛用于依照它们的相对突出方式显示标签（关键字）。我们的标签云解决方案允许基于分类的颜色规模，提供很多方法通过设置允许数量的位置和角度间隔来排列文字，并支持多个交互设置。
瀑布图表（或马里奥表、桥图表、飞砖图表）被广泛用于分析目的。尤其，该图表类型能够促进流程的分析（销售、生产、研究等等），特别是在过程中各阶段之间的探索或交流的转换。我们的瀑布图表解决方案在实际上从众多图表中脱颖而出，能够为每个状态获得数据绝对值以及状态之间的增量（差异）。
Mekko图表（或Marimekko图表）是一种从多个类别中可视化产品销售，显示在工作中技能的分配等等的便捷手段。本质上它是接近堆叠列图表类型，但后者只显示类别内的值，而Mekko图表还显示每个类别的累积值。
条形Mekko图表基本上是类同于Mekko图表，但它有一些独特的特性。首先，条形Mekko图表允许绘制趋势线。其次，它适合于包括负值。最后，条形Mekko图表比常规是Mekko图表对很多人来说看起来更熟悉。
象限图是一个简单的、同时非常方便和高效的排序和分类离散数据的工具。我们的解决方案提供了所有必需的功能，并允许成功地解决各种流行的任务，比如分散数据的分类、BI服务测评、艾森豪威尔矩阵、SWOT分析等等。
谷歌电子表格是一个优秀的流行数据源。现在我们的数据适配器已经配备了从谷歌电子表格加载数据的功能。您可以随时充分利用Google电子表格数据加载器，并请注意：数据可能来自公开共享文档。
标记选择和缩放工具能够大大地促进探索性数据分析工作。他们的研究数据可视化地展示在一个交互式图表上，更方便和直观。同样重要的是，我们的标记选择和缩放工具可能通过事件与任何自定义UI集成。
规模同步有助于一些情况下当你必须在一个可视化中展示不同的数据。用它来避免视觉混乱和防止这样一个复杂的图表误导观众。实际上，当尺度都是同步的时，你甚至可以添加堆积而最后还是制作出了好看且有用的图表。
应广大用户的请求，文本包装现在在所有包含文本的图表元素中得到支持。该文本格式功能将确保每一个输出文本绝对的print-friendly。
| 方法 | 使用替换 |
|---|---|
| saveAsPNG | saveAsPng |
| saveAsJPG | saveAsJpg |
| saveAsSVG | saveAsSvg |
| toSVG | toSvg |
查看更新原文：AnyChart v7.14.0
*请认真填写需求信息，我们会在24小时内与您取得联系。
