使用Highchart和JSON生成3D饼图

Question

我正在尝试使用HighChart生成3D饼图，并且数据在JSON中。即使我启用了3D，它似乎也只会生成2D。

我试图生成这样的3D饼图https://www.highcharts.com/demo/3d-pie

有人可以向我展示我在下面的代码上缺少的内容。

<script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
   <script src="code.highcharts.com/highcharts-3d.js"></script>
       $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'chart1',
                        type: 'pie',
                         options3d: {
                                     enabled: true,
                                     alpha: 15,
                                     beta: 15,
                                     depth: 50,
                                     viewDistance: 25
                               }
                    },
                    title: {
                        text: '',
    //                    x: -20 //center
                    },
                    subtitle: {
                        text: '',
    //                    x: -20
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        enabled: false,
                        title: {
                            text: 'Amount'
                        },
                        labels: {
    //                            formatter:function() {
    //                              return Highcharts.numberFormat(this.value, 0, '', ',');
    //                            }
    //                        ,enabled: false
                        }, 
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
                        }
                    },
                    credits: {
                            enabled: false
                        },
                    legend: {
    //                    layout: 'vertical',
    //                    align: 'right',
    //                    verticalAlign: 'top',
    //                    x: -10,
    //                    y: 100,
    //                    borderWidth: 0
                        enabled:false
                    },
                    series: []
                }
                $.getJSON("data1.json", function(json) {
                    options.xAxis.categories = json[0]['data'];
                    options.series[0] = json[1];
                    options.series[1] = json[2];
                    chart = new Highcharts.Chart(options);
                });
            });       

JSON数据

[{
    "name": "",
    "data": ["Asset","Total Lending","Total Deposits","Brokered Deposits" ]
}, {
    "name": "First Republic Bank",
    "data": [48353330,38079817,37130929,1957317]
}, {
    "name": "Cathay Bank",
    "data": [11488897,8902674,8814629,497369]
}]

Answer 1

您可以看到此codepen中工作的3D派。我已经使用您的JSON数据更新了笔。

您选项中唯一缺少的是：

plotOptions: {
  pie: {
    depth: 25
  }
}

如果您在这里查看，您可以看到某些图表不仅需要发送图表属性，还需要plotOptions。

虽然可以在PlotOptions下找到一些不同图表类型的特定设置；