将整个图表渲染到3d中，而不只是条形图

Question

我正在尝试制作3d条形图。到目前为止，我设法做到的只是渲染其中的一部分。 这是我的开始

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        type: "bar",

    },
    title: {
        useHTML: true,
        x: -10,
        y: 8,
        text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    series: [{
        data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
    }],
    xAxis: {
        categories: [{
            name: "Fruit",
            categories: ["Apple", "Banana", "Orange"]
        }, {
            name: "Vegetable",
            categories: ["Carrot", "Potato", "Tomato"]
        }, {
            name: "Fish",
            categories: ["Cod", "Salmon", "Tuna"]
        }]
    }
});

这是乞讨的阶段

之后，我将options3d对象添加到图表对象中，如下所示：

options3d: {
        enabled: true,
        alpha: 10,
        beta: 20,
        depth: 10,
        viewDistance: 50
    }

结果很好，但是像这样只是零碎的

我的目标是（请原谅我的“ photoshop技能”）

因此，基本上，我的目标是水果，蔬菜和鱼的表也与图表其余部分保持3d相同。任何人都有一个想法如何做到这一点？ 没有3d的图表小提琴 https://jsfiddle.net/a1rowqxn/ 3d图表的小提琴 https://jsfiddle.net/ajx728Le/