Question

我一直在到处搜索，但是我找不到如何使用highcharts将两种不同的颜色添加到两个不同的向下钻取列中的方法。我想将每个向下钻取的第一列设为绿色，将每个向下钻取的第二列设为红色。目前，我只能将两个向下钻取列都设为红色。

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
                    ],

                ]
            }
        ]
    }
});

Here is a Fiddle showing what I mean.

有没有办法做到这一点？预先谢谢你。

编辑：我怀疑我无法在实际代码中包含答案，因为我使用了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

Highcharts列的向下钻取，将两种不同的颜色分配给两个不同的向下钻取列？

1 个答案: