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)文章
JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)微信飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05簡(jiǎn)單方法判斷JavaScript對(duì)象為null或者屬性為空
對(duì)已聲明但未初始化的和未聲明的變量執(zhí)行typeof,都返回undefined,null表示一個(gè)空對(duì)象指針,typeof操作會(huì)返回object2014-09-09小發(fā)現(xiàn)之淺談location.search與location.hash的問題
下面小編就為大家?guī)硪黄“l(fā)現(xiàn)之淺談location.search與location.hash的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06純JS實(shí)現(xiàn)可拖拽表單的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄僇S實(shí)現(xiàn)可拖拽表單的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法
這篇文章主要介紹了javascript簡(jiǎn)單實(shí)現(xiàn)等比例縮小圖片的方法,涉及javascript針對(duì)頁面元素屬性的讀取、運(yùn)算及設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-07-07javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展
眾所周知JavaScript中有多種方法可以合并對(duì)象,下面這篇文章主要給大家介紹了關(guān)于javaScript合并對(duì)象的多種方式及知識(shí)擴(kuò)展,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns
js 復(fù)制功能 支持 for IE/FireFox/mozilla/ns...2007-11-11