Javascript highcharts 餅圖顯示數(shù)量和百分比實例代碼
更新時間:2016年12月06日 14:25:04 投稿:lqh
這篇文章主要介紹了Javascript highcharts 餅圖顯示數(shù)量和百分比實例代碼的相關資料,這里附有實例代碼,需要的朋友可以參考下
Javascript highcharts 餅圖顯示數(shù)量和百分比實例代碼
最近公司項目需求有這樣一個功能模塊,highcharts 餅圖顯示數(shù)量和百分比 ,由于本人剛入門,看到這個需求不會寫,于是就上網(wǎng)搜下相關資料,覺得一篇還不錯記錄下。
<div class="piecleft" id="chart" style="height:350px; width: 350px;">
</div>
<script type="text/javascript" charset="utf-8">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart'
},
title: {
text: '版本分布分析'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
Highcharts.numberFormat(this.y, 0, ',') +' 個)';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if (this.percentage > 4) return this.point.name;
},
color: 'white',
style: {
font: '13px Trebuchet MS, Verdana, sans-serif'
}
}
}
},
legend: {
backgroundColor: '#FFFFFF',
x: 0,
y: -30
},
credits: {
enabled: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['1.1',3617],
['1.2.1',3436],
['1.0',416],
['1.3',2],
['1.2',1],
['新增對比',5000]
]
}]
});
});
</script>
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
JavaScript實現(xiàn)微信飛機大戰(zhàn)游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)微信飛機大戰(zhàn)游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05
小發(fā)現(xiàn)之淺談location.search與location.hash的問題
下面小編就為大家?guī)硪黄“l(fā)現(xiàn)之淺談location.search與location.hash的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
javascript簡單實現(xiàn)等比例縮小圖片的方法
這篇文章主要介紹了javascript簡單實現(xiàn)等比例縮小圖片的方法,涉及javascript針對頁面元素屬性的讀取、運算及設置相關技巧,需要的朋友可以參考下2016-07-07
js 復制功能 支持 for IE/FireFox/mozilla/ns
js 復制功能 支持 for IE/FireFox/mozilla/ns...2007-11-11

