Highcharts：高交互性的javascript图表类库

核心提示： 查看原图（大图）7、饼状图查看原图（大图）三、调用方式 以Ajax返回数据到Chat数据组为例，1、效果 查看原图（大图）2、调用代码 varchart=newHighcharts.Chart({chart:{renderTo:'container',defaultSeriesT

查看原图（大图）

7、饼状图

查看原图（大图）

三、调用方式

以Ajax返回数据到Chat数据组为例，

1、效果　

查看原图（大图）

2、调用代码

var　chart　=　new　Highcharts.Chart({
　　　chart:　{
　　　　　　renderTo:　'container',
　　　　　　defaultSeriesType:　'spline'
　　　},
　　　title:　{
　　　　　　text:　'Monthly　Average　Temperature　in　Tokyo'
　　　},
　　　subtitle:　{
　　　　　　text:　'Source:　WorldClimate.com'
　　　},
　　　xAxis:　{
　　　　　　categories:　['Jan',　'Feb',　'Mar',　'Apr',　'May',　'Jun',　
　　　　　　　　　'Jul',　'Aug',　'Sep',　'Oct',　'Nov',　'Dec'],
　　　　　　title:　{
　　　　　　　　　text:　'Month'
　　　　　　}
　　　},
　　　yAxis:　{
　　　　　　title:　{
　　　　　　　　　text:　'Temperature　(°C)'
　　　　　　}
　　　},
　　　legend:　{
　　　　　　enabled:　false
　　　},
　　　tooltip:　{
　　　　　　formatter:　function()　{
　　　　　　　　　　　　　　　　return　'<b>'+　this.series.name　+'</b><br/>'+
　　　　　　　　　　　　this.x　+':　'+　this.y　+'°C';
　　　　　　}
　　　},
　　　series:　[{
　　　　　　name:　'Tokyo',
　　　　　　dataURL:　'tokyo.json'
　　　}]
});

3、代码说明

defaultSeriesType：图表类别，可取值有：line、spline、area、areaspline、bar、column等等

title：最顶端的标题

subtitle：最顶端的子标题

xAxis：X轴，数据以数组的形式组装

yAxis：Y轴，数据以数组的形式组装

tooltip：提示信息

series：ajax获得数据放到数据里面

四、总结

此chats JS类库，使用比较简单，而且样式多种，效果绚丽。唯一的缺陷是，个人免费的生成的Chat应该会有官方的网址。 不过也是有办法处理的，对生成的Chat进行Cut，应该可以把官方的网址去掉。

出处：http://www.cnblogs.com/ywqu