Highcharts 3D 饼图 - 角度实时更新答案

【问题标题】：Highcharts 3D Pie Chart - angles live updateHighcharts 3D 饼图 - 角度实时更新
【发布时间】：2021-11-10 11:27:21
【问题描述】：

饼图角度无法实时更新是否有原因（其他图表也是如此）。

我试图达到与柱形图相同的效果（在更改滑块时更新天使），但饼图唯一改变的是标签（它们朝正确的方向移动，但图表没有）。

3D 柱形图的 HighCharts 演示：https://www.highcharts.com/demo/3d-column-interactive

我的饼图现场演示：https://stackblitz.com/edit/highcharts-angular-3d-pie-chart?file=src/app/app.component.ts

【问题讨论】：

标签： highcharts

【解决方案1】：

确实无法更改该值。这是因为饼图的结构与其他图表不同，您可以在核心中查看详细信息。

对于饼图，总图的深度并不重要，设置框架也无济于事（框架与轴线相连，而饼图与其他图表不同）。对于饼图，在 plotOptions 中设置 depth 属性很重要。

https://www.highcharts.com/docs/chart-concepts/3d-charts

        Pie3DSeries.prototype.translate = function () {
            _super.prototype.translate.apply(this, arguments);
            // Do not do this if the chart is not 3D
            if (!this.chart.is3d()) {
                return;
            }
            var series = this,
                seriesOptions = series.options,
                depth = seriesOptions.depth || 0,
                options3d = series.chart.options.chart.options3d,
                alpha = options3d.alpha,
                beta = options3d.beta,
                z = seriesOptions.stacking ?
                    (seriesOptions.stack || 0) * depth :
                    series._i * depth;
            z += depth / 2;
            if (seriesOptions.grouping !== false) {
                z = 0;
            }
            series.data.forEach(function (point) {
                var shapeArgs = point.shapeArgs,
                    angle;
                point.shapeType = 'arc3d';
                shapeArgs.z = z;
                shapeArgs.depth = depth * 0.75;
                shapeArgs.alpha = alpha;
                shapeArgs.beta = beta;
                shapeArgs.center = series.center;
                angle = (shapeArgs.end + shapeArgs.start) / 2;
                point.slicedTranslation = {
                    translateX: Math.round(Math.cos(angle) *
                        seriesOptions.slicedOffset *
                        Math.cos(alpha * deg2rad)),
                    translateY: Math.round(Math.sin(angle) *
                        seriesOptions.slicedOffset *
                        Math.cos(alpha * deg2rad))
                };
            });
        };
        return Pie3DSeries;
    }(PieSeries));
    extend(Pie3DSeries.prototype, {
        pointClass: Pie3DPoint
    });

来源： https://code.highcharts.com/highcharts-3d.src.js

演示： https://jsfiddle.net/BlackLabel/7s4vL5p2/

【讨论】：