数据可视化

使用HTML5 Canvas

Canvas是HTML5语言中最具创新和影响力的元素，尤其它是与数据可视化相关的。通过使用<Canvas>标记，设计师在web页面中创建了一块预留的任意区域，可以包含在运行时通过编程方式创建的图形。HTML5画布图形是有强大的JavaScript API提供的——大量的API目前都具有良好的跨浏览器支持，并且可以立即使用。

使用<Canvas>的第一步是：在HTML页面的<body>区域中包含该标记。下面是一个完整的<Canvas>标记列表：

<canvas id="chart1" width="600" height="400">
<img src="images/altchart1.jpg" width="600" height="400">
</canvas>

初始化画布的基本步骤：

创建一个变量用于保存画布对象，使用它的ID进行识别
检查是否支持画布API的getContext()方法
如果支持，创建一个变量并在目标画布对象上应用getContext()方法

在实际中，代码如下：

<script type="text/javascript">
 functiondrawCanvas(){
var theChart = document.getElementById('chart1');
if(theChart.getContext){
    var theChart = theChart.getContext('2d');
    }
}
</script>

在定义了画布的上下文之后，所有的绘制调用都将引用该变量，将画布区域当做坐标空间。canvas标记中声明的width和height特性决定了网格中可用的像素数量，在该示例中：

<canvas id="chart1" width="600" height="400">

X轴有600像素，Y轴有400像素，默认网格原点(0,0)被设置到了画布的左上角。获得了该信息后，一个填充矩形可以使用fillRect()函数绘制到画布。

filRect(50,200,100,200)

该代码将输出一个如图所示的简单条形图

下面是绘制第一个矩形的完整HTML页面代码。我们已经添加了一些基本的CSS样式和HTML，用于将画布居中并显示出轮廓。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Example 1</title>
<script type="text/javascript">
  function drawCanvas(){
var theChart = document.getElementById('chart1');
if (theChart.getContext){
  var theContext = theChart.getContext('2d');
  theContext.fillRect(50,200,100,200);
}
  }
</script>
<style>
#outerWrapper {
    width: 800px;    
    margin: 1em auto;
}
canvas {
    border: 1px solid #000;    
}
</style>
</head>

<body onLoad="drawCanvas();">
<div id="outerWrapper">
  <canvas id="chart1" width="600" height="400"></canvas>
</div>
</body>
</html>