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