如何自定义热图高图绘图区域和数据标签的颜色

【问题标题】：how to customize heatmap highcharts plot area and the color of the datalabels如何自定义热图高图绘图区域和数据标签的颜色
【发布时间】：2020-05-22 00:01:42
【问题描述】：

希望对 highcharts 有一些帮助，我附上了一张我想在这里完成两件事的图片

第一：在这种情况下，是否可以将 yAxis 的数据放置在 2 条绘图线之间，而数据标签则位于这 2 条线之间，而不是在中间被它交叉？例如，我希望该行下方的 4 月 30 日和该行上方的数据标签以及根据日期定位

第二：当颜色是浅绿色时，如何将数字的颜色更改为黑色，难以阅读。

【问题讨论】：

标签： highcharts heatmap

【解决方案1】：

您可以将yAxis.type设置为类别，并使用格式化程序来模拟日期。

使用dataLabels.formatter 根据点值更改颜色。

series: [{
    ...,
    dataLabels: {
        enabled: true,
        formatter: function() {
            if (this.color === '#FF00FF') {
                return '<span style="color: orange">' + this.y + '</span>';
            }

            return this.y;
        }
    }
}],
yAxis: {
    type: 'category'
}

现场演示： http://jsfiddle.net/BlackLabel/qxfa9b0c/1/

API 参考：

https://api.highcharts.com/highcharts/yAxis.type

https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter

【讨论】：