highchart饼图

最新推荐文章于 2021-12-21 15:28:01 发布

大喵de

最新推荐文章于 2021-12-21 15:28:01 发布

阅读量440

点赞数

分类专栏： js 文章标签： chart js

本文链接：https://blog.csdn.net/qq_41359606/article/details/79281296

版权

8 篇文章 0 订阅

订阅专栏

  $(document).ready(function() { 

  var chart = { 

  plotBackgroundColor: null, 

  plotBorderWidth: null, 

  plotShadow: false 
 //图框阴影 

};

  var credits={ enabled: false }; 
  //隐藏网站标识 

  var title = { 

  text: '年龄段分布图' 
 //标题名称  

};

  var tooltip = { 

  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 //提示框显示的内容 

};

  var plotOptions = { 

  pie: { 

  allowPointSelect: true, 

  cursor: 'pointer', 

  dataLabels: { 

  enabled: true, 
 //在图上显示具体数据 

  formatter: function() { 

 
 //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 

  return '<span style="color: ' + this.point.color + '">' 

  + this.point.name + ':' + this.percentage// 
 this.percentage.toFixed(1)可以放在这里保留1位小数 + '%</span>'; 

  } 
 //具体数据显示格式  

},

  showInLegend: true 
 //图例显示 

}

};

  var series= [{ 

  colors:['#4f81bd','#f79646','#4bacc6','#8064a2','#9bbb59','#c0504d'], 
 //设置图例颜色，顺时针排序 

  type: 'pie', 
 //设置类型为饼图 

  name: 'Browser share', 

  data: [ 

  ['14-18岁', 25.0], 

  ['18-21岁', 25.0], 

  ['21-24岁', 20.0], 

  ['24-27岁', 5.0], 

  ['27-30岁', 10.0], 

  ['30-35岁', 15.0] 
 //具体数据 

]

}];

  var json = {}; 

  json1.credits = credits; 

  json.chart = chart; 

  json.title = title; 

  json.tooltip = tooltip; 

  json.series = series; 

  json.plotOptions = plotOptions; 

  $('#productData1-1').highcharts(json); 

});

 
 this.percentage.toFixed(1)用来将数据变为1位小数，括号内填你需要的小数位数 