分想下用highcharts制作的3d饼图

2019独角兽企业重金招聘Python工程师标准>>>

hightcharts升级4.0之后支持3D了，应该算是一件大事，网上有人已经做了些3D图表，分享下。

首先，需要说明hightcharts 4支持原生3d图，如果，你要做好效果的3d，建议下载最新的4版本。这是基础。

其次，3d饼图，需要在plotOptions中设置深度属性：

就是这样一句，设置为25：

plotOptions.pie.depth: 25

准备工作完了，我们开始制作3D饼图。

步骤一：按照老规矩，写入highcharts必要的JS：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>

步骤二：

我们为图表设定一个大小，高度为400px，用div将它包围，然后设置一个id为container，方便下面的js：

<div id="container" style="height: 400px"></div>

步骤三

填入js代码：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
				enabled: true,
                alpha: 45,
                beta: 0,
            }
        },
        plotOptions: {
            pie: {
                depth: 25
            }
        },
        series: [{
            data: [2, 4, 6, 1, 3]
        }]
    });
});

下面是代码和效果图：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文为问答：如何用highcharts制作3d图？

转载于:https://my.oschina.net/u/1163318/blog/261145