javascript - 如何在 highchart js 中的 3d 图表中添加颜色

Question

我正在使用启用了 3d 选项的散点类型 Highcharts ，现在我想用两种不同的颜色为内部 3d 区域着色，比如红色和蓝色。所以我的问题是1.如何在3d区域内填充颜色？2. 如果填充，如何将内部 3d 区域分成两部分并添加两种不同的颜色？

我的代码是

var chartClassification = new Highcharts.Chart({

chart: {
    renderTo: 'containerClassification',
    margin: 20,
    type: 'scatter',
    options3d: {
        enabled: true,
        alpha: 10,
        beta: 30,
        depth: 250,
        viewDistance: 5,
        fitToPlot: false,
        frame: {
            bottom: { size: 10, color: 'rgba(0,0,0,0.02)' },
            back: { size: 100, color: 'rgba(0,0,0,0.04)' },
            side: { size: 1, color: 'rgba(0,0,0,0.06)' }
        }
    }
},
title: {
    text: 'Classification'
},
plotOptions: {
    scatter: {
        width: 10,
        height: 10,
        depth: 10
    }
},
yAxis: {
    min: 0,
    max: 10,
    title: null
},
xAxis: {
    min: 0,
    max: 10,
    gridLineWidth: 1
},
zAxis: {
    min: 0,
    max: 10,
    showFirstLabel: false
},
legend: {
    enabled: false
},
series: [{
    name: 'Reading',
    color: 'black',
    data: []
}]

});

Answer 1

我创建了一个 fiddle 来演示您的问题:

https://jsfiddle.net/cnxwue7k/

改变每个 3d 区域的颜色相当容易

只需更改框架对象中的颜色:

frame: {
        bottom: { size: 10, color: 'grey' },
        back: { size: 100, color: 'red' },
        side: { size: 1, color: 'blue' }
    }

更多信息在这里:

https://www.highcharts.com/docs/chart-concepts/3d-charts

希望有帮助:-D

如果您需要更多帮助，请告诉我

编辑:

作为Paul在下面的评论中指出，您还可以添加更多颜色的轴，从而达到预期的效果:

http://jsfiddle.net/g6jhvcd2/