Question

我正在使用启用了3D选项的散射类型高图，现在我想用两种不同颜色（例如红色和蓝色）为内部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

我创造了一个小提琴来展示你的要求：

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/

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

1 个答案: