0
您好我正在尋找創建一個餅圖與高圖表擴展twolayers js，並旋轉到中心，只要我點擊一節。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？我得到這樣的東西：http://jsfiddle.net/nkukv1g4/4/（與點擊事件底層的更新）。但我不確定點擊「mouseMoveDiv」應該如何工作？ –
它的這個http://jsfiddle.net/vkhvvs5d/，但我想添加另一個擴展層到已經擴展的區域。例如，紅色的11.1％需要擴展成3個。然後，下一個紅色需要擴展爲三個部分，如此等等 –
好吧，爲什麼不添加更多系列，並將第一級的「尺寸」從100％更改爲90％，並且新系列將具有而不是100％？ –