使用字符串值的热图 Highchart

Question

正如您在上图中看到的，我尝试使用 highchart 为风险图表制作热图，当我对一个方块使用单个值时，它可以很好地显示数据。是否有任何技巧可以以字符串形式显示值，以便我可以将多个值放在一个方块中。这是要实现的目标

这是我的代码，我的计划是动态设置数据

$('#container').highcharts({
                chart: {
                    type: 'heatmap',
                    marginTop: 40,
                    marginBottom: 40,
                    plotBackgroundColor: 'none',
                    events: {
                        load: function() {
                            var points = this.series[0].data,
                                lenY = this.yAxis[0].tickPositions.length - 1,
                                lenX = this.xAxis[0].tickPositions.length - 1,
                                x = lenX,
                                tmpX = 0,
                                y = 0,
                                j = 0;

                            $.each(points, function(i, p) {

                                if ((p.x == 0 && p.y < 4) || (p.x == 1 && p.y < 2)) {
                                    p.update({
                                        color: 'green'
                                    }, false);
                                } else if ((p.x == 0 && p.y == 4) || (p.x == 1 && p.y > 1) || (p.x == 2 && p.y < 2)) {
                                    p.update({
                                        color: 'cyan'
                                    }, false);
                                } else if ((p.x == 2 && p.y > 1) || (p.x == 3 && p.y < 3) || (p.x == 4 && p.y == 0)) {
                                    p.update({
                                        color: 'yellow'
                                    }, false);
                                } else if ((p.x == 3 && p.y > 2) || (p.x == 4 && (p.y > 0 && p.y < 3))) {
                                    p.update({
                                        color: 'orange'
                                    }, false);
                                } else if (p.x == 4 && p.y > 2) {
                                    p.update({
                                        color: 'red'
                                    }, false);
                                }

                            });

                            this.isDirty = true;
                            this.redraw();
                        }
                    }
                },


                title: {
                    text: 'Peta Risiko'
                },

                xAxis: {
                    categories: ['tdk sig', 'min', 'med', 'sig', 'sgt sig']
                    // categories: ['A', 'B', 'C', 'D', 'E']
                },

                yAxis: {
                    categories: ['sgt kecil', 'kecil', 'sedang', 'besar', 'sgt besar'],
                    title: null
                },

                colorAxis: {
                    min: 0,
                    minColor: 'transparent',
                    maxColor: 'transparent'
                    //maxColor: Highcharts.getOptions().colors[0]
                },

                legend: {
                    align: 'right',
                    layout: 'vertical',
                    margin: 0,
                    verticalAlign: 'top',
                    y: 25,
                    symbolHeight: 320
                },

                tooltip: {
                    formatter: function() {
                        return '<b>Dampak risiko adalah ' + this.series.xAxis.categories[this.point.x] + '</b> <br><b>' +
                            this.point.value + '</b> dan kemungkinan terjadi <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
                    }
                },

                /*want to make this part dynamically populated*/
                series: [{
                    data: [{
                            x: 0,
                            y: 0,
                            value: [7, 5]
                        }, //color:'red'},
                        {
                            x: 0,
                            y: 1,
                            value: 0
                        }, //color:'red'},
                        {
                            x: 0,
                            y: 2,
                            value: 2
                        }, //color:'red'},
                        {
                            x: 0,
                            y: 3,
                            value: 3
                        }, //color:'red'},
                        {
                            x: 0,
                            y: 4,
                            value: 4
                        }, //color:'red'},
                        {
                            x: 0,
                            y: 0,
                            value: 0
                        }, //color:'red'},

                        {
                            x: 1,
                            y: 0,
                            value: 60
                        }, //color:'red'},
                        {
                            x: 2,
                            y: 0,
                            value: 70
                        }, //color:'red'},
                        {
                            x: 3,
                            y: 0,
                            value: 80
                        }, //color:'red'},
                        {
                            x: 4,
                            y: 0,
                            value: 90
                        }, //color:'red'},
                        {
                            x: 1,
                            y: 1,
                            value: 70
                        }, //color:'yellow'},
                        {
                            x: 1,
                            y: 2,
                            value: 80
                        }, //color:'yellow'},
                        {
                            x: 2,
                            y: 1,
                            value: 90
                        }, //color:'yellow'},

                        {
                            x: 1,
                            y: 3,
                            value: 80
                        }, //color:'green'},
                        {
                            x: 1,
                            y: 4,
                            value: 90
                        }, //color:'green'},
                        {
                            x: 2,
                            y: 2,
                            value: 90
                        }, //color:'green'},
                        {
                            x: 2,
                            y: 3,
                            value: 80
                        }, //color:'green'},
                        {
                            x: 1,
                            y: 4,
                            value: 90
                        }, //color:'green'},                
                        {
                            x: 3,
                            y: 1,
                            value: 90
                        }, //color:'green'},
                        {
                            x: 3,
                            y: 2,
                            value: 90
                        }, //color:'green'},
                        {
                            x: 4,
                            y: 1,
                            value: 190
                        }, //color:'green'},
                        {
                            x: 3,
                            y: 3,
                            value: 80
                        }, //color:'green'},
                        {
                            x: 3,
                            y: 4,
                            value: 90
                        }, //color:'orange'},
                        {
                            x: 4,
                            y: 4,
                            value: 90
                        }, //color:'orange'},
                        {
                            x: 3,
                            y: 3,
                            value: 90
                        }, //color:'orange'},
                        {
                            x: 4,
                            y: 3,
                            value: 90
                        }, //color:'orange'},
                        {
                            x: 4,
                            y: 2,
                            value: 90
                        }, //color:'orange'},
                        {
                            x: 2,
                            y: 4,
                            value: 90
                        } //color:'orange'}
                    ],
                    dataLabels: {
                        enabled: true,
                        color: 'black',
                        style: {
                            textShadow: 'none'
                        }
                    }

                }]

            });

Answer 1

您可以添加多个 data label。

演示：https://jsfiddle.net/BlackLabel/cnpz8u7j/

或者您可以使用 SVGRenderer 工具添加自定义标签：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label