渲染后在javascript中旋转圆环图

总而言之，我有一个客户要求使用高级图表创建圆环图，然后能够通过移动触摸移动事件或桌面上的鼠标移动事件来旋转圆环和标签。 我的客户正在使用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  1 ? ''+ this.point.name +': '+ 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会有一些startAngle 。 如果你不这样做，它仍然会旋转，但从标签到切片的线条转向意大利面条。 我只需将其设置为5度 – 将其设置为适合您用例的任何内容。

示例代码。

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

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