Развернуть столбец Highcharts, назначить два разных цвета двум разным столбцам развертки?

Question

Я искал повсюду, но не могу найти, как добавить два разных цвета в два разных столбца развертки с помощью старших графиков.Я хотел бы сделать первый столбец для каждой развертки зеленым, а второй - красным для каждой развертки.На данный момент я могу сделать оба столбца развертки красным цветом.

JS:

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Browser market shares. January, 2018'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    "series": [
        {
            "name": "Browsers",
            "colorByPoint": true,
            "data": [
                {
                    "name": "Chrome",
                    "y": 62.74,
                    "drilldown": "Chrome"
                },
                {
                    "name": "Firefox",
                    "y": 10.57,
                    "drilldown": "Firefox"
                },
                {
                    "name": "Internet Explorer",
                    "y": 7.23,
                    "drilldown": "Internet Explorer"
                },

            ]
        }
    ],
    "drilldown": {
        "series": [
            {
                "name": "Chrome",
                "id": "Chrome",
                "color": 'red', 



                "data": [
                    [
                        "v65.0",
                        1,
                    ],
                    [
                        "v64.0",
                        1.3
                    ],

                ]
            },
            {
                "name": "Firefox",
                "id": "Firefox",
                "data": [
                    [
                        "v58.0",
                        1.02
                    ],
                    [
                        "v57.0",
                        7.36
                    ],

                ]
            },
            {
                "name": "Internet Explorer",
                "id": "Internet Explorer",
                "data": [
                    [
                        "v11.0",
                        6.2
                    ],
                    [
                        "v10.0",
                        0.29
                    ],

                ]
            },
            {
                "name": "Safari",
                "id": "Safari",
                "data": [
                    [
                        "v11.0",
                        3.39
                    ],
                    [
                        "v10.1",
                        0.96
                    ],

                ]
            },
            {
                "name": "Edge",
                "id": "Edge",
                "data": [
                    [
                        "v16",
                        2.6
                    ],
                    [
                        "v15",
                        0.92
                    ],

                ]
            },
            {
                "name": "Opera",
                "id": "Opera",
                "data": [
                    [
                        "v50.0",
                        0.96
                    ],
                    [
                        "v49.0",
                        0.82
                    ],

                ]
            }
        ]
    }
});

Вот Скрипка, показывающая, что я имею в виду.

Есть ли способ, которым я могу это сделать?Заранее спасибо.

Редактировать: Я не могу включить ответ в мой фактический код, я подозреваю, потому что я использую цикл for.Мой рабочий код без окраски ниже.Я буду обновлять, если мне удастся реализовать ответ в этом.

                "drilldown": {
                    "series": [

                      {% for each_space in Vacant_location_data %}

                        {
                            "name": "{{ each_space.loc_room }}",
                            "id": "{{ each_space.loc_room }}",

                            "data":[
                                [
                                    "Free space",
                                    {{ each_space.nempty }},

                                ],

                                [
                                    "Occupied Space",
                                    {{ each_space.occupied }}
                                ],

                            ]
                            ,

                        },

                        {% endfor %}
                    ]
                }

Answer 1

До сих пор вы раскрашивали всю серию.Но вы можете покрасить каждую точку развертки индивидуально, как в этом примере: https://jsfiddle.net/BlackLabel/rzfpho7a

"drilldown": {
"series": [{
    "name": "Chrome",
    "id": "Chrome",
    "data": [{
      name: "v65.0",
      y: 1,
      color: 'green'
    }, {
      name: "v64.0",
      y: 1.3,
      color: 'red'
    }]
  },
 .
 .
 .

API: https://api.highcharts.com/highcharts/series.column.data