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

Question

这是我的图表的jsfiddle:

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'字样.我需要做些什么才能做到这一点？

Answer 1

您可以在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是正确的数字,以使其仅显示第一个和最后一个标签.

同样只是抬头,格式化程序功能会将0刻度设置为"Free",将所有其他设置为"Full",但是从这里开始只显示2个刻度.

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

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