jscharts学习

JSCharts的基本实现

Step1：将下载的jscharts.js放进你的html页面中

Step2：在你的页面中放置用一个标签来作为JSCharts的容器（推荐使用<div>标签），然后给这个容器设置一个独立的id。

Step3：加入一些JavaScript代码读进数据

一个简单的linechart

上面第一行用一维数组定义了5组数据，每组数据代表一个点；第二行new一个JSChart对象，参数'chartcontainer'绑定页面中的id为 'chartcontainer'的标签，'line'参数定义chart属性，line是折线图，pie为饼图,bar为柱状图；第三行用 setDataArray方法加载数据；第四行显示图表。

这段代码实现了一个柱状图，数据中的'unit','unit one'等字符串为每个柱状图的标识。

这段代码也实现一个柱状图，但它的数据来源于data.xml文件，方法是setDataXML。

如果你用xml文件来加载图表数据，那么这个xml文件必须符合JSCharts定义的一组标签。比如：

主节点必须为JSChart,子节点可以为datasetcolorset和optionset。上面这段xml文件只定义了dataset，因为只有dataset子节点是必须的，所以必须要设置type属性。

JSCharts的高级实现

多数据支持

如果要在一个折线图上做两条线，就要用到两组数据：

注：setDataArray方法有第二个可选参数，用来为每条折线设置id或者name。

或者在xml文件中设置两组dataset:

自定义图表

JSCharts非常易于自定义，你可以用两种途径对图表进行自定义：内置API方法和xml文件的optionset节点。

下面这段代码自定义了一个折线图的X，Y轴名称、背景色、整个图表的大小以及标题、标题颜色、文字大小等。

如果你想给两条折线分别使用不同的颜色，那么就必须为这两条线分别设置不同的id，然后用

setLineColor方法设置其颜色属性，如下图所示：

当然id是可以在多条折线身上重复的。另外你还可以用setTooltip方法给每条线的每个节点设置不同工具提示。

下面是用xml文件来进行自定义的情况

<option>节点有两个必要的属性，set和value。set其实是和JavaScript方法名对应的，value则用来设置其方法参数。

当折线图包含两个以上的折线时，需要在每条线的dataset设好id，然后在option节点里给value加入对应的折线的id。

一些例子

自定义折线图

自定义柱状图

自定义饼图

上面简单介绍了JSCharts的功能、实现方法和自定义。更详细的API请参考JSCharts官方网站提供的参考手册：http://www.jscharts.com/how-to-use-reference

本文图片中的代码均来自于JSCharts:http://www.jscharts.com/

原文地址：http://hi.baidu.com/thinkmad/item/22f0188b59c85a5c27ebd966

JScharts自己动手体验：http://www.jscharts.com/interface/template/id.64