现在的位置: 首页 > 综合 > 正文

Highcharts绘制饼图

2019年05月16日 ⁄ 综合 ⁄ 共 2193字 ⁄ 字号 小 中 大 ⁄ 评论关闭

1、使用Highcharts制作饼图的效果图如下：

2、对应的JavaScript代码---pie-chart.js如下：

[javascript] view
plaincopy

  1. $(function () {  
  2.     var chart;  
  3.     var totalMoney=50000  
  4.     $(document).ready(function() {  
  5.         chart = new Highcharts.Chart({  
  6.             chart: {  
  7.                 renderTo: 'pie_chart',  
  8.                 plotBackgroundColor: 'white',//背景颜色  
  9.                 plotBorderWidth: 0,  
  10.                 plotShadow: false  
  11.             },  
  12.             title: {  
  13.                 text: 'Total:$'+totalMoney,  
  14.                 verticalAlign:'bottom',  
  15.                 y:-60  
  16.             },  
  17.             tooltip: {//鼠标移动到每个饼图显示的内容  
  18.                 pointFormat: '{point.name}: <b>{point.percentage}%</b>',  
  19.                 percentageDecimals: 1,  
  20.                 formatter: function() {  
  21.                     return this.point.name+':$'+totalMoney*this.point.percentage/100;  
  22.                 }  
  23.             },  
  24.             plotOptions: {  
  25.                 pie: {  
  26.                     size:'60%',  
  27.                     borderWidth: 0,  
  28.                     allowPointSelect: true,  
  29.                     cursor: 'pointer',  
  30.                     dataLabels: {  
  31.                     enabled: true,  
  32.                     color: '#000',                        
  33.                     distance: -50,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠  
  34.                     style: {                              
  35.                         fontSize: '10px',  
  36.                         lineHeight: '10px'  
  37.                     },  
  38.                     formatter: function(index) {      
  39.                             return  '<span style="color:#00008B;font-weight:bold">' + this.point.name + '</span>';  
  40.                        }  
  41.                   },  
  42.                  padding:20  
  43.                 }  
  44.             },  
  45.             series: [{//设置每小个饼图的颜色、名称、百分比  
  46.                 type: 'pie',  
  47.                 name: null,  
  48.                 data: [  
  49.                     {name:'Base salary',color:'#3DA9FF',y:65},  
  50.                     {name:'Health insurance',color:'#008FE0',y:20},  
  51.                     {name:'Company matched',color:'#00639B',y:10},  
  52.                     {name:'Others',color:'#CBECFF',y:5}  
  53.                 ]  
  54.             }]  
  55.         });  
  56.     });  
  57.       
  58. });  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞