在highcharts.js中，如何对图像进行自定义标记

Question

如何在highcharts.js中为轴创建自定义图像和文本标记？我需要一个正常的数字作为刻度的标签，然后在数字下面显示一个小的彩色正方形图像(依赖于特殊值数组中的另一个变量)。这就是我需要做的，见下图

​

Answer 1

您可以为矩形创建一个额外的HTML元素，并在“load”事件中使用颜色轴将值转换为背景颜色。

const colorValues = [5, 9, 14, 15, 1, 4];

Highcharts.chart('container', {
    ...,
    chart: {
        events: {
            load: function() {
                const rectangles = document.getElementsByClassName('label-rect'),
                    colorAxis = this.colorAxis[0];

                [].forEach.call(rectangles, function(rect) {
                    rect.style.backgroundColor = colorAxis.toColor(rect.dataset.value);
                });
            }
        }
    },
    xAxis: {
        type: 'category',
        labels: {
            style: {
                'text-align': 'center'
            },
            useHTML: true,
            formatter: function() {
                return this.pos + '<br/>' +
                    '<span data-value="' + colorValues[this.pos] +
                    '" class="label-rect"></span>'
            }
        }
    }
});

现场演示： http://jsfiddle.net/BlackLabel/7146g2r3/

接口参考：

https://api.highcharts.com/highcharts/xAxis.labels

https://api.highcharts.com/highcharts/colorAxis