在呈现后在JavaScript中旋转圆环图 [英] Rotating a donut chart in javascript after it is rendered

问题描述

全部，我有一个来自我的客户端的请求，使用高图表lib创建环形图，然后可以通过移动设备上的触摸移动事件或桌面上的鼠标移动事件来旋转环形图渲染。我的客户端正在使用hammer.js，jquery和高图表。我不知道如何去获取圆环图旋转。任何人都可以分享一些想法/样品或知道其他图书馆可能已经这样做？以下是高图表示例 http://jsfiddle.net/skumar2013/nsDzn/ 甜甜圈图表。非常感谢任何帮助。

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;
                }
            }
        }]
    });
});

推荐答案

按钮顺时针旋转+15度（逆时针旋转，减去15度）。我们操作的选项是 series.options.startAngle 。不是这需要图表有一个明确的声明为 startAngle 否则你得到NaN。

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.

按钮代码：

$('#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
    });
});

有一些技巧可以重置 startAngle 如果大于359度则为0。如果你不这样做，它仍然旋转，但从标签到切片的线变成意大利面。我只是设置为5度 - 将其设置为对您的用例有好处。

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.

示例代码。

编辑：
为了尽量减少舞蹈派/甜甜圈，请设置 center param以及：

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

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

这篇关于在呈现后在JavaScript中旋转圆环图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！