Question

我正在尝试使用HighChart生成三维饼图，数据采用JSON格式。即使我启用了3D，它似乎只生成2d。

我正在尝试生成这样的三维饼图 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 DATA

[{
    "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
  }
}

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

虽然可以在plotOptions;
下找到不同图表类型的某些特定设置

使用HIghchart和JSON生成3D饼图

1 个答案: