基于JS Charts实现Web应用数据的可视化

文/刘班

1 概述

数据分析是通过对大量数据的分析统计来预测事物发展趋势的技术。但由于数据的文本化原始呈现，导致一般的用户从这些抽象的数据中无法获得自己所需要的重要信息。数据可视化技术的出现很好地解决了这个问题。该技术将通过数据分析技术得到的数据转换为形象的图表，通过这些图表可以使得数据分析的结果得到形象展示。

JS Charts是一款使用Javascript语言开发的图表生成组件，开发者可以通过该组件很容易地实现数据的可视化。该组件的运行不需要任何额外插件或者服务器端模块。应用开发者只需要编写少量的客户端Javascript代码就可以驱动JS Charts在Web浏览器中将来自前后端的数据转换成各类常用图表并显示出来。

2 JS Charts的特点

JS Charts是一款免费的原生Javascript开源组件，具有良好的跨平台性。其运行不需要任何服务器端插件和模块的支持，能够与现有Web应用程序实现无缝集成。开发者可以在许可证授权的情况下，根据自己的应用需求修改JS Charts的源代码实现特定功能和效果。JS Charts提供的图表类型丰富，包括了常见的柱状图、饼图以及曲线图，并支持各类图表的动画显示功能，可以很容易地在IE、Firefox、Chrome、Safari、Opera等常见浏览器中显示图表效果。

3 JS Charts的使用

JS Charts的易用性非常好，应用开发者只需访问官网http://www.jscharts.com下载支持文件jscharts.js，并将该文件包含到需要使用这个图表库的Javascript程序文件中即可。在jscharts.js文件中不仅包含了在Web浏览器中绘制图表和文本所需要的库，还包含了驱动IE浏览器绘图所需的画布函数。

JS Charts在绘制图表之前，需要开发人员预先指定一个图表容器，这个容器用于显示图表，可通过div标签描述。然后借助语句var myChart=new JSChart('chartcontainer','line');将该div与指定图表关联起来，并指定图表类型为line曲线图，后期也可以根据应用需要更改为bar柱状图类型或pie饼图类型。有了前面两步的基础，开发者就可以继续为图表的绘制准备数据了。JS Charts支持的数据形式有Javascript数组、JSON文件以及XML文件三种。其中，以Javascript数组形式的数据最为常见，另外两种数据形式与数组形式的数据类似。在图表中一般都至少包含一个数据系列，而一个数据系列又包含多个数据。因此，在数组形式的数据中通常需要再包含多个数组，内层包含的每一个一维数组可以用来描述图表数据系列中的一个数据，内外两层一维数组构成一个二维数组，准确描述图表中包含的数据系列。这类二维数组一般通过语句var myData=new Array(['unit',20],['unit two',10],['unit three',30],['other unit',10],['last unit',30])；进行定义。除此以外，还需要使用JS Charts提供的setDataArray方法将数组数据加载到图表中。不同类型的数据采用的加载方法是有差别的，JSON文件形式数据的加载方法是setDataJSON，XML文件形式数据的加载方法是setDataXML。

在图表数据的支持下，开发者就可以通过调用JS Charts的draw方法实现图表的绘制操作。为满足开发者的个性化需要，JS Charts还提供了两种定制图表外观的方法。一种方法是通过JS Charts内置的函数实现图表外观定制，开发人员可以选用不同的函数，并传递给这些函数具体的参数，来实现对图表外观的控制。另一种方法是通过选项组来实现定制，类似于编写外观配置文件，开发者可以将外观配置选项组插入JSON格式数据文件或XML格式数据文件中，从而精确设置图表各组成部分的外观。

在JS Charts中，除了支持常规的单数据系列的图表显示功能之外，还支持多数据系列在同一个图表中的对比显示功能，可以让开发者更为方便地开发出具有数据比较功能的图表应用。在生成多数据系列的图表中，JS Charts目前仅支持柱状图和曲线图两种图表类型。在编写这种特殊的多数据系列图表生成代码时，必须先提供多个数据系列所对应的数据。比如要生成同时显示两个数据系列的曲线图表，采用数组形式的数据，那么就要将定义数据的代码写为var myData1=new Array(['unit',20],['unit two',10],['unit three',30],['other unit',10],['last unit',30])；var myData2=new Array(['unit',40],['unit two',20],['unit three',10],['other unit',50],['last unit',20])；的形式。可见，有多少个数据系列，就要定义多少组对应的数据。当使用XML文件形式的数据时，与数组形式的数据类似，要明确加上id属性，实现对数据系列的区别控制。比如定义了曲线图表对应的一个id为first line的数据系列。但在定义多系列柱状图表的时候，要将多数据系列的数据同时定义到一个二维数组中。比如将上面定义的包含两个数据系列的曲线图表转换为柱形图表时，就需要将数据定义改写为var myData=new Array(['unit',20,40],['unit two',10,20],['unit three',30,10],['other unit',10,50],['last unit',30,20])；的形式，即将内层数组变成包含3个元素的一维数组。在加载这些数据系列的时候，也要注意设置一个能够识别这些数据系列的名称选项。比如在曲线图表中加载上面定义的两个数据系列时，要分别使用 setDataArray（myData1,‘line1’）;和setDataArray（myData1,‘line2’）;来实现。其中的字符串名称line1和line2就是用来识别这两个数据系列的标识，在定制这两个数据系列外观的时候就需要用这两个标识来区别对应的两个数据系列。当包含多数据系列的图表显示时，为了能给用户清晰的数据比较呈现，通常都需要将图表中多个数据系列对应的图形图像的外观配置得具有明显的视觉对比效果。定制曲线图表时，只需要使用每个数据系列的标识就可以正确识别它们，但在定制柱状图表的时候，就应该使用编号来识别这些数据系列。比如要分别设置包含两个数据系列的柱状图表背景颜色，那么就应写为setBarColor(颜色1,1);和setBarColor(颜色2,2);的形式，其中的数字1和2分别对应两个数据系列。这样，通过视觉效果上适合的区别化定制操作，就可以生成清晰美观，并且对比明显的多数据系统数据图表了。

4 结语

随着大数据技术和数据分析技术的发展，各类计算机应用软件对于数据可视化组件的需求越来越大。目前提供数据可视化的JS或HTML5组件虽然很多，但JS Charts作为一款轻量级的免费开源Javascript图表脚本库，凭借其丰富的功能、兼容性好、可定制性强以及易于使用的特点崭露头角，受到了越来越多的Web应用开发人员的喜爱。可以预见，随着JS Charts的不断完善，我们以后将会在更多的Web应用中看到使用JS Charts开发的图表效果。