所以我希望创建一个三维饼图（在Highcharts），其中每个片的深度由该点的值来确定。问题here应该给你什么我要去为我的一个好主意。
目前，Highcharts只在串联电平支持深度参数，所以我的第一个想法是使多个系列，如下所示：#1。
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [
{ name: 'a', y: 1, val: 0.59, color: '#25683d' },
{ name: 'b', y: 1, val: 1.25, color: '#222f58' },
{ name: 'c', y: 2, val: 0.73, color: '#bebe89' },
],
depth: 45,
startAngle: 0,
endAngle: 180
}, {
data: [
{ name: 'd', y: 2, val: -0.69, color: '#900' },
{ name: 'e', y: 2, val: 0.57, color: '#a0a0a0' }
],
depth: 60,
startAngle: 180,
endAngle: 360
}]
});<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="height: 400px"></div>如果没有工作，我又回到了存储在一个系列中的所有数据，并试图更新SVG元素深度渲染后（因为在这里可以看到：qazxsw POI。
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
},
events: {
load: function() {
this.series[0].data.forEach((val, i) => {
var depth = val.graphic.attribs.depth;
val.graphic.attribs.depth = depth + (i * 10);
});
this.redraw();
}
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [{
name: 'a',
y: 1,
val: 0.59,
color: '#25683d'
},
{
name: 'b',
y: 1,
val: 1.25,
color: '#222f58'
},
{
name: 'c',
y: 2,
val: 0.73,
color: '#bebe89'
},
{
name: 'd',
y: 2,
val: -0.69,
color: '#900'
},
{
name: 'e',
y: 2,
val: 0.57,
color: '#a0a0a0'
}
],
}]
});）转移每片了在维护例如一个美观的图表..不是成功没有那么：https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate。
还值得注意的是，我不得不定义一个数组用于y的翻译，这是尝试和错误的主要结果任何引用或想法将作为我开始撞墙不胜感激。
您可以使用Highcharts Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60
},
events: {
load: function() {
this.series[0].data.forEach((val, i) => {
var depth = val.graphic.attribs.depth;
val.graphic.attribs.depth = depth + (i * 10);
});
this.redraw();
},
redraw: function() {
var y_trans = [0, -8, -16, -25, -34];
this.series[0].data.forEach((val, i) => {
val.graphic.translate(0, y_trans[i]);
});
}
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 125,
depth: 60
}
},
series: [{
name: 'Delivered amount',
data: [{
name: 'a',
y: 1,
val: 0.59,
color: '#25683d'
},
{
name: 'b',
y: 1,
val: 1.25,
color: '#222f58'
},
{
name: 'c',
y: 2,
val: 0.73,
color: '#bebe89'
},
{
name: 'd',
y: 2,
val: -0.69,
color: '#900'
},
{
name: 'e',
y: 2,
val: 0.57,
color: '#a0a0a0'
}
],
}]
});和扩展wrap方法：
translate此外，在var each = Highcharts.each,
round = Math.round,
cos = Math.cos,
sin = Math.sin,
deg2rad = Math.deg2rad;
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
// Do not do this if the chart is not 3D
if (!this.chart.is3d()) {
return;
}
var series = this,
chart = series.chart,
options = chart.options,
seriesOptions = series.options,
depth = seriesOptions.depth || 0,
options3d = options.chart.options3d,
alpha = options3d.alpha,
beta = options3d.beta,
z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
z += depth / 2;
if (seriesOptions.grouping !== false) {
z = 0;
}
each(series.data, function(point) {
var shapeArgs = point.shapeArgs,
angle;
point.shapeType = 'arc3d';
var ran = point.options.h;
shapeArgs.z = z;
shapeArgs.depth = depth * 0.75 + ran;
shapeArgs.alpha = alpha;
shapeArgs.beta = beta;
shapeArgs.center = series.center;
shapeArgs.ran = ran;
angle = (shapeArgs.end + shapeArgs.start) / 2;
point.slicedTranslation = {
translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
};
});
});
(function(H) {
H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
// Run original proceed method
var ret = proceed.apply(this, [].slice.call(arguments, 1));
ret.zTop = (ret.zOut + 0.5) / 100;
return ret;
});
}(Highcharts));
事件中，你需要扭转的图表：
load现场演示： events: {
load: function() {
var each = Highcharts.each,
points = this.series[0].points;
each(points, function(p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
});
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
});
});
}
}