Highchart js点击旋转展开圆弧

Question

你好，我想用 highchart js 创建一个饼图，它展开两层，并在我单击某个部分时旋转到中心。

到目前为止，我有一个展开一层的饼图，以及一个将圆弧带到中心 (-90) 的点击功能。我还有一个按度数旋转饼图的点击功能。我的内弧保持在中心，我很难将弧移动到外环的相同位置。内弧也不跟随点击旋转。

我想制作一个平滑旋转到中心 (-90) 并展开两个额外层的馅饼。内拱跟随外拱并与外拱处于同一起点

提前致谢

这是我的代码执行的样子：

pie chart with what im currently running

这是我的脚本

$(function () {

    var lastHighlight = -1;
    var lastPos = [10,10,10];
    $('#mouseMoveDiv').click(function () {
        var theChart = $('#container').highcharts();
        var currStartAngle = theChart.series[0].options.startAngle;
        //console.log('currStartAngle: ' + currStartAngle);
        var newStartAngle = currStartAngle + 5;
        if (newStartAngle > 359) {
            newStartAngle = 5;
        }
        //console.log(newStartAngle);
        theChart.series[0].update({
            startAngle: newStartAngle
        });
        var someData = theChart.series[0].data;
        var N = someData.length;
        var highLight = -1;
        for (var i = 0; i < N; i++){
            var startAngle = someData[i].angle + (((someData[i].percentage/100) * 6.28318)/2);
            var dis = 1.5795 - startAngle;
            if (lastPos[i] > 0 && dis < 0){
                highLight = i;
                lastPos[i] = dis;
                break;
            }
            lastPos[i] = dis;
        }
        if (highLight != -1){
            var someRows = $('#dataTable tr');
            someRows.eq(lastHighlight).css('backgroundColor','white');
            someRows.eq(highLight).css('backgroundColor','yellow');
            lastHighlight = highLight;
        }
    });



    $('#container').highcharts({







        chart: {
            type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    center: ["50%", "50%"],
                    connectorWidth: 0,
                    startAngle: 90,
                    animation: false
                }
            }
        },

        exporting: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        title: {
            text: null
        },




        series: [{
            type: 'pie'
            data: [
                { name: 'Planning', y: 33.3 },
                { name: 'Sprints', y: 33.3 },
                { name: 'Release', y: 33.3 }
            ],

            size: '60%',
            innerSize: '40%',
            point: {
                events: {
                    click: function () {
                        var chart = this.series.chart,
                                series = chart.series,
                                len = series.length,
                                index = this.x + 1,
                                i;
                        for (i = 1; i < len; i++) {
                            if (i === index) {
                                series[i].update({
                                    size: '100%',
                                    dataLabels: {
                                        enabled: true
                                    }
                                }, false);
                            } else {
                                series[i].update({
                                    size: '0%',
                                    dataLabels: {
                                        enabled: false
                                    }
                                }, false);
                            }
                        }
                        var points = this.series.points;
                        var startAngle = 0;
                        for (var i = 0; i < points.length; i++) {
                            var p = points[i];
                            if (p == this) {
                                break;
                            }
                            startAngle += (p.percentage / 100.0 * 360.0);
                        }
                        this.series.update({
                            startAngle: -startAngle + 90 - ((this.percentage / 100.0 * 360.0) / 2) // center at 180
                        })
                        chart.redraw();
                    }

                }
            },
            dataLabels: {
                distance: 90, //distance name
                style: {
                    color: 'Black'
                },
                enabled: true
            },

            zIndex: 1
        },

            {
                zIndex: 0,
                type: 'pie',
                size: '60%',
                innerSize: '0%',


                data: [{
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Training'

                },
                    {
                    y: 2,
                    color: 'rgba(250,0,0,1)',
                    name: 'Secure'
                },
                    {
                    y: 8,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }

                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,200,0,1)',
                    name: 'test'
                }, {
                    y: 3,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            },


            {
                zIndex: 0,
                type: 'pie',
                size: '0%',
                data: [{
                    y: 6,
                    color: 'rgba(0,0,0,0)',
                    dataLabels: {
                        enabled: false
                    }
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }, {
                    y: 1,
                    color: 'rgba(0,0,200,1)',
                    name: 'test'
                }],
                dataLabels: {
                    distance: -30,
                    enabled: false,
                    style: {
                        color: 'black'
                    }
                },
                enableMouseTracking: false
            }]
    });
});

Answer 1

我建议稍微改变一下逻辑：为每个圆圈使用一个系列，然后手动管理切片的可见性。例如：http://jsfiddle.net/vkhvvs5d/3/

然后回答第二个问题，使用 series.update() 时不支持旋转动画，但是它有一个简单的解决方法：http://jsfiddle.net/8x54efu6/3

var chart = $("#container").highcharts(),
    pie = chart.series[0];

pie.options.startAngle = new_angle;
pie.isDirty = pie.isDirtyData = true;

chart.redraw();