Highcharts怎么用

這篇文章將為大家詳細(xì)講解有關(guān)Highcharts怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

Highcharts無(wú)需像flash圖表那樣需要預(yù)先加載flash控件，因此它兼容幾乎所有的瀏覽器，包括iphone以及老掉牙的IE6。Highcharts還提供豐富的參數(shù)配置，開(kāi)發(fā)人員可以通過(guò)不同的配置生成各種圖表。此外，Highcharts還支持圖表導(dǎo)出，圖表局部放大，圖表提示、多圖表共存等多種特性。

準(zhǔn)備

我們要先將jquery庫(kù)以及highcharts圖表庫(kù)。

var chart; $(function() {    chart = new Highcharts.Chart({        chart: {            renderTo: 'chart_line', //放置圖表的DIV容器對(duì)應(yīng)的id屬性            defaultSeriesType: 'line' //圖表類型line, spline, area, areaspline, column, bar, pie , scatter        },        title: {            text: '主要城市月平均氣溫',  //圖表標(biāo)題            x: -20 //center        },        subtitle: {            text: '數(shù)據(jù)來(lái)源于網(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: '長(zhǎng)沙',            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è)漂亮的線狀圖表了。

關(guān)于“Highcharts怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。