highcharts -如何在热图图例上做自定义标签

highcharts - how do I do custom labels on heatmap legend

本文关键字：自定义 标签 highcharts      更新时间：2023-09-26

这是我的图表:

http://jsfiddle.net/b637gdxv/4/

    chart: {
        type: 'heatmap',
        marginTop: 26,
        marginLeft: 5,
        marginRight: 5,
        width: 200, 
        height: 250,
        borderWidth: 3,
        borderColor: 'grey',
        borderRadius: 5,
        plotBackgroundColor: '#FFFFFF',
        plotShadow: true
    },

目前我不知道如何添加自定义标签到这个图表。我不想要"0-100"标签，相反，我想让文本"Free"在最左边，"Full"在最右边。我需要做些什么来实现这个目标?

可以在colorAxis配置中配置标签。

colorAxis: {
  min: 0,
  max: 100,
  stops: [
    [0, '#9DFF9D'],
    [0.2, '#fffbbc'],
    [0.7, '#fffbbc'],
    [0.9, '#E6532E']
  ],
  labels: {
    step: 4,
    enabled: true,
    formatter: function() {
      return this.value === 0 ? "Free" : "Full";
    }
  }
}

这是更新后的小提琴http://jsfiddle.net/b637gdxv/5/

请注意，我不太确定highcharts是如何计算出colorAxis将绘制多少个刻度的，但是从示例4开始是正确的数字，可以使它只显示第一个和最后一个标签。

也只是一个提示，formatter函数会将0标记设置为"Free"，而将所有其他标记设置为"Full"，但由于这里只显示2个标记，因此它可以工作。

Highcharts实际上有一个非常棒的api，大多数配置选项都有很多示例，所以你可以在这里查看标签和其他任何选项:

http://api.highcharts.com/highmaps colorAxis.labels

相关文章：