Highcharts-制作图表的js库

?

2、曲线图

?

3、散状图

?

?

4、区域图

?

5、区域曲线图

?

?

6、柱状图

?

7、饼状图更多Demo请参考官方网站：http://www.highcharts.com/demo/

?

四、调用方式

以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获得数据放到数据里面