jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
更新時間:2015年03月14日 11:06:52 投稿:hebedich
這篇文章主要介紹了jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖的方法,非常的實用,小伙伴們可以直接拿到項目中使用。
在數據統計和分析業(yè)務中,有時會遇到客戶需要在一個圖表中將柱狀圖、餅狀圖、曲線圖的都體現出來,即可以從柱狀圖中看出具體數據、又能從曲線圖中看出變化趨勢,還能從餅狀圖中看出各部分數據比重。Highcharts可以輕松實現三圖合一的效果。
復制代碼 代碼如下:
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
以上就是本文所述的全部內容了,希望對大家使用jQuery繪制柱狀圖餅狀圖曲線圖能夠有所幫助
相關文章
使用jquery判斷一個元素是否含有一個指定的類(class)實例
下面小編就為大家?guī)硪黄褂胘query判斷一個元素是否含有一個指定的類(class)實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02jquery移除button的inline onclick事件(已測試及兼容瀏覽器)
這種方法在Google Chrome下正常工作,但是在IE的兼容模式下會馬上調用reclick方法,這不是我們想要的效果;為了解決這個問題,我們可以換個思路,就是延遲綁定click事件2013-01-01JQuery下的Live方法和$.browser方法使用代碼
網站做好了,老師卻要求要3級菜單,無奈只好去做3級菜單了。這次3級菜單的思路是在原有不變的基礎上,對有3級菜單的ID,選擇進入新的一個控件。在這個新的控件里用ajax去請求其3級目錄里的東西。2010-06-06