javascript - 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”标签，而是希望在最左侧显示文本“免费”，在最右侧显示“完整”。我需要做什么才能做到这一点？

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";
    }
  }
}

这是更新后的 fiddle http://jsfiddle.net/b637gdxv/5/

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

另外请注意，格式化程序函数会将 0 刻度设置为“免费”，将所有其他刻度设置为“完整”，但由于此处您只显示 2 个刻度，因此可以解决。

Highcharts 实际上有一个非常棒的 api，其中包含大多数配置选项的 fiddle 示例，因此您可以在此处查看标签的其他选项和其他任何内容:

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