Question

所有，我有客户要求使用高级图表创建圆环图，然后能够通过手机上的触摸移动事件或桌面上的鼠标移动事件将圆环与标签一起旋转渲染。我的客户使用的是hammer.js，jquery和high chart。我不知道如何让圆环图旋转。任何人都可以分享一些想法/样本或知道可能已经这样做的其他图书馆吗？这是一个高图表样本http://jsfiddle.net/skumar2013/nsDzn/圆环图。非常感谢任何帮助。

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

Answer 1

好的，我能够通过顺时针旋转+15度的按钮完成此操作（逆时针旋转减去15度）。我们操纵的选项是series.options.startAngle。并不是说这要求图表有startAngle的明确声明，否则你会得到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
    });
});

如果超过359度，有一些技巧可以将startAngle重置为0。如果你不这样做，它仍然会旋转，但从标签到切片的线条转向意大利面条。我只需将其设置为5度 - 将其设置为适合您用例的任何内容。

Sample代码。

编辑：为了尽量减少跳舞派/甜甜圈设置center参数：

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

渲染后在javascript中旋转圆环图

1 个答案: