canvas教程

highcharts饼图显示数量和百分比的用法示例

字号+ 作者:H5之家 来源:H5之家 2017-03-27 16:00 我要评论( )

这篇文章主要介绍了highcharts饼图显示数量和百分比的用法示例,这里附有实例代码,需要的朋友可以参考下

最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下。

<div> </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>

以上就是highcharts饼图显示数量和百分比的用法示例,希望能帮助到大家,谢谢大家对本站的支持!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Android 画图-画饼图

    Android 画图-画饼图

    2017-01-09 15:05

  • 浅谈HTML5与css3画饼图!

    浅谈HTML5与css3画饼图!

    2016-04-06 12:02

  • highcharts入门高级篇:深度剖析highcharts图表画图原理canvas

    highcharts入门高级篇:深度剖析highcharts图表画图原理canvas

    2015-11-17 15:15

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    jQuery.Highcharts.js绘制柱状图饼状图曲线图

    2015-11-16 16:04

网友点评