Javascript highcharts 餅圖顯示數(shù)量和百分比實(shí)例代碼
Javascript highcharts 餅圖顯示數(shù)量和百分比實(shí)例代碼
最近公司項(xiàng)目需求有這樣一個(gè)功能模塊,highcharts 餅圖顯示數(shù)量和百分比 ,由于本人剛?cè)腴T,看到這個(gè)需求不會(huì)寫,于是就上網(wǎng)搜下相關(guān)資料,覺得一篇還不錯(cuò)記錄下。
<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, ',') +' 個(gè))';
}
},
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],
['新增對(duì)比',5000]
]
}]
});
});
</script>
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- JS highcharts動(dòng)態(tài)柱狀圖原理及實(shí)現(xiàn)
- JS highcharts實(shí)現(xiàn)動(dòng)態(tài)曲線代碼示例
- highcharts.js數(shù)據(jù)綁定方式代碼實(shí)例
- html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
- 淺析jquery的js圖表組件highcharts
- Highcharts 非常實(shí)用的Javascript統(tǒng)計(jì)圖demo示例
- 純JAVASCRIPT圖表動(dòng)畫插件Highcharts Examples
- jQuery.Highcharts.js繪制柱狀圖餅狀圖曲線圖
- JavaScript圖表插件highcharts詳解
相關(guān)文章
echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
下面小編就為大家?guī)硪黄猠charts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
javascript結(jié)合fileReader 實(shí)現(xiàn)上傳圖片
FileReader具體支持哪些方法和事件,這里就不介紹了,有興趣的可以去w3c官網(wǎng)上看看FileReader介紹,這里主要介紹一下FileReader常見應(yīng)用,以及fileReader 實(shí)現(xiàn)上傳圖片示例分享。2015-01-01
JavaScript金額運(yùn)算出現(xiàn)精度丟失問題的解決方案
在 JavaScript 中,浮點(diǎn)數(shù)運(yùn)算可能會(huì)產(chǎn)生精度丟失的問題,尤其在處理 金額計(jì)算 時(shí),本文為大家整理了一些常用方法,有需要的小伙伴可以根據(jù)需求進(jìn)行選擇2025-03-03
CocosCreator入門教程之用TS制作第一個(gè)游戲
這篇文章主要介紹了CocosCreator入門教程之用TS制作第一個(gè)游戲,對(duì)TypeScript感興趣的同學(xué),一定要看一下2021-04-04
javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
這篇文章主要介紹了javascript實(shí)現(xiàn)搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)的效果,示例代碼如下,大家可以看看2014-09-09

