在在大数据的带领下，数据可视化越来越突出，能够清楚的分析出自己想要的数据，这也是我们现在最求的数据可视化方法，那么实现HTML5的数据可视化方法有哪些？这都是我们值得研究的东西，数据可以给我们带来敏感的市场未来发展，同时也能够实时分别不同数据效果。

HTML5为数据可视化提供了新的实现方法。本文对HTML5在健康数据可视化在PC及部分移动终端上的应用进行研究。使用HTML5中的Canvas和SVG实现的数据可视化方法基于浏览器的支持，具有很好的平台兼容性

可视化（Visualization）是采用计算机图形学和图形处理技术将数据转换成图形或者图像显示出来的技术。可视化汇集了数据表示、数据处理和决策分析等一系列问题。

随着科学技术的不断发展，海量数据的出现加快了数据可视化技术的发展。很多平台提供了实现数据可视化的技术，如Flash和Silverlight都提供了相应的绘图技术，对于基于Web的应用，包含了SVG和Canvas的HTML5提供了新的数据可视化技术。现在主流浏览器大部分完成了对HTML5标准的支持，包含IE9、Chrome、FireFox、Safari等，而且现在智能手机以及平板电脑的浏览器对HTML5都有很好的支持，同时这些移动终端的日益普及也使基于HTML5的数据可视化跨平台成为了可能。

1　相关技术

HTML5标准是HTML下一个主要的修订版本，现在仍处于发展阶段。其目标是取代1999年所制定的HTML　4.01和XHTML　1.0　标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义的HTML5标准实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。HTML5包含了SVG（Scalable　Vector　Graphics），同时提供了实时二维绘图技术Canvas。本文就基于SVG和Canvas对数据可视化的实现提出一种可行的方法。

1.1　SVG

SVG英文全称为Scalable　Vector　Graphics，由W3C制定，其基于可扩展标记语言XML。SVG是用于描述二维矢量图形的一种图形格式，由于它是基于XML的一种语言，所以它继承了XML的跨平台性和可扩展性。如SVG文档中可以嵌入其他的XML或者HTML内容，XML或者HTML中可以内嵌SVG，而各个不同的SVG图形可以方便地组合，构成新的SVG图形。SVG还具有很多优点，比如很好的可扩充性和交互性。SVG支持无限放大，SVG图片任意比例的放大不会损害图片的显示效果，其他诸如PNG，GIF，BMP，JPEG格式的图片放大则会影响视觉效果。同时SVG还提供了很好的动画交互效果，通过定义鼠标事件和键盘事件，以及相关的脚本编程就可以实现SVG图形的动画效果及交互操作。

1.2　Canvas

Canvas最初是由苹果内部使用自己的Mac OS X WebKit推出，苹果大力推广使用HTML5，促进了Canvas的发展和应用，HTML5提供了画布元素，同时HTML5定义了很多API支持脚本化客户端绘图操作，元素本身是没有任何外观的，但是它在HTML文章中创建了一个画板，通过绘图API可以在画板中绘制位图模式的图形。

1.3 SVG和Canvas对比

SVG和Canvas是两种图像模式，他们的绘制过程也不相同，所以他们有各自的优缺点。SVG是矢量图，它通过一颗XML元素树来实现，使用SVG来绘制图形，可以很简单地通过移除增加相应的元素来编辑图形元素。SVG的矢量特性有时对性能会造成很大的影响，所以SVG的整体性能比Canvas要差。Canvas是位图，它通过调用API实现绘图，其API基于Javascript，相对简洁。但对于Canvas生成的图片，要更新图片中的元素就不得不把当前的擦出再重新绘制一遍。

表1

2　数据可视化的实现

基于HTML5的数据可视化的方法是基于数据驱动，采用HTML5提供的API借助浏览器的支持，在客户端实现的绘图的可视化技术。数据驱动依靠服务器端提供数据，数据源可以采用数据库，OLAP等，数据预处理为事先定义好的格式，依靠服务器提供的WEB Service，向客户端传输数据。本文采用JSON（Javascript Object Notation）作为数据传输格式，这是一种轻量级的数据交换格式，适合服务器与浏览器的交互。浏览器收到服务器端数据使用HTML5提供的绘图技术Canvas或SVG渲染出所需图形，由于图形绘制是基于浏览器，所以这种方法可以跨平台使用，对于智能手机和平板电脑，只要系统里安装支持HTML5 Canvas和SVG的浏览器就可以绘制图形。

2.1 基于SVG的数据驱动可视化工具D3.js

D3（Data-Driven Documents）是一个基于数据驱动的JavaScript库，通过使用HTML、SVG和CSS操作网页元素，同时提供操作各种复杂数据集的方法。D3的很多元素操作都基于css选择器，它可以选择网页元素并在改，删，增上与数据集保持一致，这个特征和jQuery类似。同时D3还提供了很好的交互的方法，例如动画，事件处理等。D3做为基于SVG的数据驱动可视化工具，提供了很好的Javascript库函数用来实现具体的可视化矢量图形，而它的使用和jQuery一样，只需在HTML中添加d3.js的外部引用即可。d3.selectAll(“p”).style(“color”， “white”); //这条语句简单的实现选择所以HTML中

并改变字体颜色为白色。

2.2 数据可视化模型定义

本文考虑使用工厂模式实现一种数据可视化方法，首先定义数据集对象和数据可视化对象，可视化对象接收数据，完成在浏览器中的图形渲染得到可视化结果。可视化对象由多个模块构成，考虑到代码重用性，可以根据可视化图形的不同定义不同的模块，模块分为接收数据和不接收数据两种，通过对固定模块的不同组合可以得到多样的可视化图形结果。对于不同模块图形渲染，可以不局限于使用Canvas或者SVG，考虑到Canvas的性能和SVG的矢量及灵活选择的特性，可以选择合适的技术来渲染可视化图形结果。

数据集对象需要完成对数据源的预处理，从服务器端返回的数据源是一定格式的JSON数据，数据集对象需要提供特定的API构造成可视化对象可以接受的数据集结果。

var dataset = new CrossTableDataset();

dataset.addRowAxis(“姓名”， [“张XX”， “李XX”， “王XX”， “赵XX”]， “dimension”);

dataset.addColumnAxis(“指标”， [“BMI”]， “measure”);

dataset.setData(true， [[25.1，18.5，22.5，32.5]]);

可视化对象需要不同模块的组合，常规图形如曲线图，饼图，直方图等，都需要标题，图例，所以这种模块可以定义为固定的一种模块，同时根据模块的功能定义相应的模块，如容器和绘图模块；

Main Container对象负责图形模块的布局，如可以将Legend对象的位置放在？Main Container的左边或者下部，Plot Conta接收数据集对象，渲染成需要的图形结果，这部分包含数据点的绘制，数据轴的绘制等。

chartOption={title : {visible : true}}; //设置图形属性

chart=newVizInstance({type:’Column，container:’chart’，

option:chartOption， data:dataset});

chart.update({title:{visible :false}}); //更新图形属性

图形示例化初始化参数定义为一个Object对象，其包含一系列参数，type为图形种类，container是图形结果显示在HTML DOM中位置，通常是一个

，option为图形属性的设置参数，data是图形接收的数据集。VizInstance对象同时具有更新图形属性的API。

3　数据可视化在健康分析上的应用

基于HTML5的数据可视化的方法在健康分析防霾你做一个应用，亚健康是结余健康与疾病之间的状态，亚健康是一种危险的状态，所以即使发现自身健康状况的风险，并作出改善是非常重要的，好的健康分析手段能够更加即使的给出健康风险的诊断，根据检测社体体质信息数据，包含BMI（体重身高比）、心肺功能、身体力量、身体平衡性、身体柔韧性等数据，同时采集医学和生活方式及心理方面的数据，通过数据的横向和纵向比较可以给出身体状况分析，通过实践积累和采集的个体数据增加，会有大量的健康数据，对于这些数据通故宫已经很难做出的比较分析，通过数据可视化借助于图形化手段，会生成直观的比较结果。

4　结论

本文介绍了HTML5标准中的Canvas和SVG绘图技术，比较了两者在数据可视化方面的优缺点，阐述了采用HMTL5绘图技术实现数据可视化的一种方法，这种方法基于浏览器的支持，通过调用HMTL5提供的绘图API，通过Javascript实现具体的数据可视化图形的绘制。这种方法可以很好的跨平台，但同时这种方法由于依赖浏览器的支持，在使用上有浏览器的限制，例如现在浏览器IE8对Canvas和SVG都没有支持。不过由于HTML5的逐渐成熟，各大主流浏览器厂商会逐渐完善对Canvas和SVG的支持。

学习前端的同学注意了！！！

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流群461593224，我们一起学前端！

anvas描述

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

一般写法：<canvas id="tutorial"width="150"height="150"></canvas>

（1）getContext()

getContext()用来获得渲染上下文和它的绘画功能,只有一个参数，目前只支持2d，即：

var canvas = document.getElementById('tutorial');

var ctx = canvas.getContext('2d');

getContext()可以用来检测当前浏览器是不是支持canvas，如果不支持可以用指定文本替代：

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');// 支持

} else {

// 不支持，可以写相关提示文字

}

案例：

<script type="text/javascript">

function draw(){

var canvas = document.getElementById('tutorial');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

}

}

</script>

<style type="text/css">

canvas { border: 1px solid black; }

</style>

<body onload="draw();">

<canvas id="tutorial" width="150" height="150"></canvas>

</body>

效果：只是一个空画布

（2）绘制矩形

canvas提供了四种方法绘制矩形

rect()： 创建矩形，仅仅创建并未画出，仍需要fill或者stroke填充或者画出来！

fillRect(x, y, width, height) 绘制一个填充的矩形

strokeRect(x, y, width, height) 绘制一个矩形的边框

clearRect(x, y, width, height)清 除指定矩形区域，让清除部分完全透明。

例子：

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

ctx.fillRect(25,25,100,100);//绘制一个100*100矩形，默认黑色

ctx.clearRect(45,45,60,60);//删除一个60*60的矩形

ctx.strokeRect(50,50,50,50);//绘制一个50*50的边框

}}

效果图：

（3）绘制路径

路径绘制图形需要的步骤：

1、首先，你需要创建路径起始点。

2、然后你使用画图命令去画出路径。

3、之后你把路径封闭。

4、一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

通过以下常用函数来画图：

beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()通过线条来绘制图形轮廓。

fill()通过填充路径的内容区域生成实心的图形。

moveTo(x,y)将笔触移动到指定的坐标x以及y上。

lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。

arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

注意：注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

例子1：绘制一个三角形

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.beginPath();//新建路径

ctx.moveTo(75,50);//从75*20的位置开始

ctx.lineTo(100,75);//画到100*75

ctx.lineTo(100,25);//再画到100*25

ctx.fill();//填充颜色

}}

效果：

例子2：画一个是描边三角形。

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

// 描边三角形

ctx.beginPath();

ctx.moveTo(125,125);

ctx.lineTo(125,45);

ctx.lineTo(45,125);

ctx.closePath();

ctx.stroke();//描边

}}

效果图：

例子3：通过圆弧画图：

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext){

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制

ctx.moveTo(110,75);

ctx.arc(75,75,35,0,Math.PI,false); // 口(顺时针)

ctx.moveTo(65,65);

ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼

ctx.moveTo(95,65);

ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼

ctx.stroke();

}}

效果：

（4）二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

贝塞尔曲线图：

二次贝塞尔曲线例子：、

function draw() {

var canvas = document.getElementById('canvas');

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

// 二次贝尔赛曲线

ctx.beginPath();

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);

ctx.quadraticCurveTo(125,100,125,62.5);

ctx.quadraticCurveTo(125,25,75,25);

ctx.stroke();

}}

效果：

三次贝塞尔曲线例子：

functiondraw(){

var canvas = document.getElementById('canvas');

if(canvas.getContext){

var ctx = canvas.getContext('2d');

//三次贝塞尔曲线

ctx.beginPath();

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);

ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.fill();

}}

效果：

canvas还有很多不错的功能，如果想学习，可以接续看我的后续教程.

委外待续....

hart.js

是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。

帮你用不同的方式让你的数据变得可视化。每种类型的图表都有动画效果，并且看上去非常棒，即便是在retina屏幕上。

基于HTML5 canvas技术，支持所有现代浏览器，并且针对IE7/8提供了降级替代方案。

不依赖任何外部工具库，轻量级（压缩之后仅有4.5k），并且提供了加载外部参数的方法。

下面是Chart.js的应用示例：

1引入Chart.js文件

首先我们需要在页面中引入Chart.js文件。此工具库在全局命名空间中定义了Chart变量

<script type="text/javascript" src="js/Chart.min.js"></script>

2 创建图表

为了创建图表，我们要实例化一个Chart对象。为了完成前面的步骤，首先需要需要传入一个绘制图表的2d context。以下是案例。

Html

<canvas id="canvas1" height="450" width="600"></canvas>

Js：

var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

var myLineChart = ctx1.Line(LineChart, options);

当我们完成了在指定的canvas上实例化Chart对象之后，Chart.js会自动针对retina屏幕做缩放。

Chart对象设置完成后，我们就可以继续创建Chart.js中提供的具体类型的图表了

3 曲线图（Line chart）

简介

曲线图就是将数据标于曲线上的一种图表。

一般用于展示趋势数据，和比较两组数据集。

使用案例

数据结构

<canvas id="canvas1" height="450" width="600"></canvas>

var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

// 线型图

var LineChart = {

labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],

datasets: [{

fillColor: "rgba(151,249,190,0.5)",

strokeColor: "rgba(255,255,255,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

data: [100, 200, 300, 400, 550]

}, {

fillColor: "rgba(252,147,65,0.5)",

strokeColor: "rgba(255,255,255,1)",

pointColor: "rgba(173,173,173,1)",

pointStrokeColor: "#fff",

data: [28, 68, 40, 19, 96]

}]

};

var myLineChart = ctx1.Line(LineChart, options);

4 条形图（Bar chart）

简介

条形图是将数据显示为条形图的一种方法。

它有时用来显示趋势数据，同时比较多个数据集。

使用案例

数据结构

<canvas id="canvas2" height="450" width="600"></canvas>

var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

// 条形图

var BarChart = {

labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],

datasets: [{

fillColor: "rgba(151,249,190,0.5)",

strokeColor: "rgba(255,255,255,1)",

data: [13, 20, 30, 40, 50]

}, {

fillColor: "rgba(252,147,65,0.5)",

strokeColor: "rgba(255,255,255,1)",

data: [28, 68, 40, 19, 96]

}]

};

var myBarChart = ctx2.Bar(BarChart, options);

5 饼图（Pie chart）

简介

饼图可能是最常用的图表。它们被划分为段，每个段的弧显示每一段数据的比例值。

他们擅长显示数据之间的关系比例。

使用案例

数据结构

<canvas id="canvas3" height="450" width="600"></canvas>

var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

// 饼状图

var pieChart = [

{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},

{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},

{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},

];

var myPieChart = ctx3.Pie(pieChart);

6 环形图（Doughnut chart）

简介

环形图表与饼图相似，但它们有中心切割，因此形状更像油炸圈饼而不是馅饼！

他们善于展示数据之间的关系比例。

使用案例

数据结构

<canvas id="canvas4" height="450" width="600"></canvas>

var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

// 环状图

var doughnutChart = [

{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},

{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},

{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},

{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},

{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}

];

var myRingChart = ctx4.Doughnut(doughnutChart);

7 浏览器支持

所有现代浏览器和大部分手机浏览器都支持canvas

对于IE8及以下版本的浏览器，建议使用ExplorerCanvas。对于不支持canvas的IE会自动降级为VML格式。使用下面方法，excamvas.js可以在下面网址

http://www.bvbcode.com/cn/yk51lwhx-894917-down

<head>

<!--[if lte IE 8]>

<script src="excanvas.js"></script>

<![endif]-->

</head>

附，下面是完整的html代码：

<html>

<head>

<meta charset="utf-8">

<script type="text/javascript" src="js/Chart.min.js"></script>

</head>

<body>

<canvas id="canvas1" height="450" width="600"></canvas>

<canvas id="canvas2" height="450" width="600"></canvas>

<canvas id="canvas3" height="450" width="600"></canvas>

<canvas id="canvas4" height="450" width="600"></canvas>

<script type="text/javascript">

var ctx1 = new Chart(document.getElementById("canvas1").getContext("2d"));

var ctx2 = new Chart(document.getElementById("canvas2").getContext("2d"));

var ctx3 = new Chart(document.getElementById("canvas3").getContext("2d"));

var ctx4 = new Chart(document.getElementById("canvas4").getContext("2d"));

var options = {scaleFontSize: 13, scaleFontColor: "#ffa45e"};

// 线型图

var LineChart = {

labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],

datasets: [{

fillColor: "rgba(151,249,190,0.5)",

strokeColor: "rgba(255,255,255,1)",

pointColor: "rgba(220,220,220,1)",

pointStrokeColor: "#fff",

data: [100, 200, 300, 400, 550]

}, {

fillColor: "rgba(252,147,65,0.5)",

strokeColor: "rgba(255,255,255,1)",

pointColor: "rgba(173,173,173,1)",

pointStrokeColor: "#fff",

data: [28, 68, 40, 19, 96]

}]

};

var myLineChart = ctx1.Line(LineChart, options);

// 条形图

var BarChart = {

labels: ["Ruby", "jQuery", "Java", "ASP.Net", "PHP"],

datasets: [{

fillColor: "rgba(151,249,190,0.5)",

strokeColor: "rgba(255,255,255,1)",

data: [13, 20, 30, 40, 50]

}, {

fillColor: "rgba(252,147,65,0.5)",

strokeColor: "rgba(255,255,255,1)",

data: [28, 68, 40, 19, 96]

}]

};

var myBarChart = ctx2.Bar(BarChart, options);

// 饼状图

var pieChart = [

{value: 40, color: "#fcc79c", highlight: "#AD0A56", label: "SCI"},

{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},

{value: 90, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},

];

var myPieChart = ctx3.Pie(pieChart);

// 环状图

var doughnutChart = [

{value: 60, color: "#fcc79e", highlight: "#AD0A56", label: "SCI"},

{value: 30, color: "#beefd2", highlight: "#AD0A56", label: "SSCI"},

{value: 50, color: "#ffddfb", highlight: "#AD0A56", label: "Others"},

{value: 120, color: "#cdecff", highlight: "#AD0A56", label: "TEST"},

{value: 90, color: "#fff5bc", highlight: "#AD0A56", label: "ADD"}

];

var myRingChart = ctx4.Doughnut(doughnutChart);

</script>

</body>

</html>