Javascript highcharts 饼图显示数量和百分比实例代码
(编辑:jimmy 日期: 2024/11/18 浏览:3 次 )
Javascript highcharts 饼图显示数量和百分比实例代码
最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下。
<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>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
下一篇:jQuery EasyUI 获取tabs的实例解析