使用highchart实现3D饼图（重点是3D图、饼图图例不显示问题）

本文主要是介绍使用highchart实现3D饼图（重点是3D图、饼图图例不显示问题），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一：使用highchart实现3D饼图

HTML：需要一个容器来绘图

<div class="dataItemRight" id="trafficData"></div>

JS：所需js文件

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://code.highcharts.com.cn/highcharts/8.1.2/highcharts-3d.js"></script>

js代码块：重点已注释

<script type="text/javascript">Highcharts.chart('trafficData', {colors:['#4D7BF3','#FCC419'],chart: {type: 'pie',options3d: {enabled: true,//启用alpha: 25,//内旋转角度beta: 0// 外旋转角度}},title: {//标题text: '单位：元',align: 'right',color: "#333333",x: -55,y: 37},legend: {//重点，在这里设置图例不生效，手动问号？？？//不知道问什么，需要在下面plotOptions.pie.showInLegend来设置图例的显示才可以},credits: {enabled: false},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',depth: 80,// 重点，实现3d效果dataLabels: {enabled: true,format: '{point.name}{point.percentage:.1f}%'},showInLegend: true//重点图例显示}},series: [{name: 'Brands',colorByPoint: true,data: [{name: '今日ETC交易总额',y: 61,sliced: true,selected: true}, {name: '其他交易总额',y: 39}]}]});
</script>

效果图：