Rotating a donut chart in javascript after it is rendered

问题

All, I have a request from my client to create a donut chart using high charts lib and then be able to rotate the donut along with the label by touch move event on mobile or a mouse move event on desktop after the graph is rendered. My client is using hammer.js, jquery and high charts. I am not sure how to go about getting the donut chart to rotate. Can anybody share some ideas/samples or know of other libraries that might already do this? Here's a high chart sample http://jsfiddle.net/skumar2013/nsDzn/ donut chart. Any help is greatly appreciated.

$(function () {

    var colors = Highcharts.getOptions().colors,
        categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
        name = 'Browser brands',
        data = [{
                y: 55.11,
                color: colors[0],
                drilldown: {
                    name: 'MSIE versions',
                    categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
                    data: [10.85, 7.35, 33.06, 2.81],
                    color: colors[0]
                }
            }, {
                y: 21.63,
                color: colors[1],
                drilldown: {
                    name: 'Firefox versions',
                    categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
                    data: [0.20, 0.83, 1.58, 13.12, 5.43],
                    color: colors[1]
                }
            }, {
                y: 11.94,
                color: colors[2],
                drilldown: {
                    name: 'Chrome versions',
                    categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                        'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
                    data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
                    color: colors[2]
                }
            }, {
                y: 7.15,
                color: colors[3],
                drilldown: {
                    name: 'Safari versions',
                    categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                        'Safari 3.1', 'Safari 4.1'],
                    data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
                    color: colors[3]
                }
            }, {
                y: 2.14,
                color: colors[4],
                drilldown: {
                    name: 'Opera versions',
                    categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
                    data: [ 0.12, 0.37, 1.65],
                    color: colors[4]
                }
            }];


    // Build the data arrays
    var browserData = [];
    var versionsData = [];
    for (var i = 0; i < data.length; i++) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        for (var j = 0; j < data[i].drilldown.data.length; j++) {
            var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Browser market share, April, 2011'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Versions',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                formatter: function() {
                    // display only if larger than 1
                    return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                }
            }
        }]
    });
});

回答1:

Okay, I was able to get this done with a button that rotates by +15 degrees clockwise (to do counter-clockwise you subtract 15 degrees). The option we are manipulating is the series.options.startAngle. Not that this requires that the chart has an explicit declaration for the startAngle otherwise you get NaN.

Button code:

$('#buttonRight').click(function () {
    var theChart = $('#container').highcharts();
    var currStartAngle = theChart.series[0].options.startAngle;
    console.log('currStartAngle: ' + currStartAngle);
    var newStartAngle = currStartAngle + 15;
    if (newStartAngle > 359) {
        newStartAngle = 5;
    }
    console.log(newStartAngle);
    theChart.series[0].update({
        startAngle: newStartAngle
    });
});

There is some trickery in there to reset the startAngle to 0 if more than 359 degrees. If you do not do that it still rotates but the lines from the label to the slice turn to spaghetti. I just set it to 5 degrees - set it to whatever is good for your use case.

Sample code.

EDIT: To minimize the dancing pie/donut set the center param as well:

    plotOptions: {
        pie: {
            center: ["50%", "50%"],
            startAngle: 0,
            animation: false
        }
    },

来源：https://stackoverflow.com/questions/21141152/rotating-a-donut-chart-in-javascript-after-it-is-rendered