Highcharts是一款功能非常強(qiáng)大的純javascript類庫，它主要為您的WEB應(yīng)用提供豐富漂亮且可互動(dòng)的圖表。目前，Highcharts支持圖表類型有直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅狀圖、散布圖。

Highcharts無需像flash圖表那樣需要預(yù)先加載flash控件，因此它兼容幾乎所有的瀏覽器，包括iphone以及老掉牙的IE6。 Highcharts還提供豐富的參數(shù)配置，開發(fā)人員可以通過不同的配置生成各種圖表。此外，Highcharts還支持圖表導(dǎo)出，圖表局部放大，圖表提 示、多圖表共存等多種特性。本文先介紹highcharts簡單的使用方法，后面我們會(huì)通過前后臺(tái)并與數(shù)據(jù)庫結(jié)合講解highcharts的具體使用，先 看教程：

準(zhǔn)備

我們要先將jquery庫以及highcharts圖表庫。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>

XHTML

在需要放置圖表的頁面body中加入以下代碼：

<div id="chart_line" style="width: 800px; height: 400px; margin: 0 auto"></div>

Javascript

具體請看代碼：

var chart;
$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_line', //放置圖表的DIV容器對應(yīng)的id屬性
            defaultSeriesType: 'line' //圖表類型line, spline, area, areaspline, column, bar, pie ,
 scatter
        },
        title: {
            text: '主要城市月平均氣溫',  //圖表標(biāo)題
            x: -20 //center
        },
        subtitle: {
            text: '數(shù)據(jù)來源于網(wǎng)絡(luò)',  //副標(biāo)題
            x: -20
        },
        xAxis: {  //x軸
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', 
'十月', '十一月', '十二月']
        },
        yAxis: {  //y軸
            title: {
                text: '平均氣溫(°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {  //當(dāng)鼠標(biāo)懸置數(shù)據(jù)點(diǎn)時(shí)的格式化提示
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
		legend: {  //【圖例】位置樣式
            layout: 'vertical',  //【圖例】顯示的樣式：水平（horizontal）/垂直（vertical）
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 100,
            y: 70,
            floating: true,
            shadow: true
        },
        series: [{
            name: '北京',
            data: [ - 4.6, -2.2, 4.5, 13.1, 19.8, 24.0, 25.8, 24.4, 19.3, 12.4, 4.1, -2.7]
        },
        {
            name: '上海',
            data: [3.5, 4.6, 8.3, 14.0, 18.8, 23.3, 27.8, 27.7, 23.6, 18.1, 12.2, 6.2]
        },
        {
            name: '長沙',
            data: [4.7, 6.2, 10.9, 16.8, 21.6, 25.9, 29.3, 28.7, 24.3, 19.0, 12.5, 7.0]
        },
        {
            name: '廣州',
            data: [13.3, 14.4, 17.7, 21.9, 24.6, 27.2, 30.8, 32.1, 27.2, 23.7, 21.3, 15.6]
        }]
    });
});

這樣，就可以生成一個(gè)漂亮的線狀圖表了。要想對highcharts的應(yīng)用有更深入的了解，請關(guān)注本站后面的文章。