首页 > 编程 > JavaScript > 正文

Javascript highcharts 饼图显示数量和百分比实例代码

2019-11-19 18:39:23
字体:
来源:转载
供稿:网友

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>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表