【发布时间】：2016-02-22 13:29:58
【问题描述】：
您好，我正在寻找一个带有 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
}]
});
});
【问题讨论】：
-
你能用你当前的工作设置 jsfiddle 吗？我得到这样的东西：jsfiddle.net/nkukv1g4/4（在点击事件中也有底层的更新）。但我不确定点击“mouseMoveDiv”应该如何工作？
-
这是jsfiddle.net/vkhvvs5d，但我想在已经扩展的区域中添加另一个扩展层。所以举个例子，红色的 11.1% 需要展开成 3 块。然后下一个红色也需要展开成三块，所以通过等等
-
好吧，那你为什么不添加更多系列并将第一级的
size从 100% 更改为 90%，而新系列将改为 100%？ -
谢谢，我不知道如何添加更多系列 - 一旦我添加了系列，脚本不会添加额外的层
-
请不要破坏您的问题。
标签： javascript jquery highcharts pie-chart