溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Highcharts怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Highcharts是一款功能非常強大的純javascript類庫，它主要為您的WEB應用提供豐富漂亮且可互動的圖表。目前，Highcharts支持圖表類型有折線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖、散布圖。
Highcharts無需像flash圖表那樣需要預先加載flash控件，因此它兼容幾乎所有的瀏覽器，包括iphone以及老掉牙的IE6。Highcharts還提供豐富的參數配置，開發人員可以通過不同的配置生成各種圖表。此外，Highcharts還支持圖表導出，圖表局部放大，圖表提示、多圖表共存等多種特性。
我們要先將jquery庫以及highcharts圖表庫。
var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_line', //放置圖表的DIV容器對應的id屬性
defaultSeriesType: 'line' //圖表類型line, spline, area, areaspline, column, bar, pie ,
scatter
},
title: {
text: '主要城市月平均氣溫', //圖表標題
x: -20 //center
},
subtitle: {
text: '數據來源于網絡', //副標題
x: -20
},
xAxis: { //x軸
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月',
'十月', '十一月', '十二月']
},
yAxis: { //y軸
title: {
text: '平均氣溫(°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() { //當鼠標懸置數據點時的格式化提示
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]
}]
});
});
這樣，就可以生成一個漂亮的線狀圖表了。
關于“Highcharts怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
