如何将热图图例标题定位在不同的位置？答案

【问题标题】：How to position heatmap legend title in different position?如何将热图图例标题定位在不同的位置？
【发布时间】：2021-07-26 23:05:04
【问题描述】：

我有一个热图，右侧有一个图例比例，顶部有标签。我想知道是否可以将标签“MMF 共享类别数”移动到图例刻度下方与左侧 y 轴标签相同的垂直位置？

https://jsfiddle.net/samwhite/5d6kL32o/2/

xAxis: {
        // categories: this.value,
        title: {
          text: 'Date'
        },
        labels: {
          autoRotation: [-10],
          formatter: function () {
            var dt = xcats[this.value];
            var date = new Date(dt);
            var month = date.getUTCMonth() + 1;
            var year = date.getUTCFullYear()
            return `${year}` 
          }
        },
        tickInterval: 45
      },
      yAxis: {
        title: {
          text: 'Price ($)'
        },
        labels: {
          formatter: function () {
            return `$${(this.value / 10000).toFixed(4)}`;
          }
        },
        min: ymin*10000,
        max: ymax*10000,
        plotLines: [{
          value: 10000,
          color: 'darkred',
          dashStyle: 'shortdash',
          width: 0.2,
          zIndex: 5
        }]
      },
      tooltip: {
        pointFormatter: function () {
          return `NAV per share: <strong>${(this.y / 10000)}</strong>
             <br/>Date: <strong>${xcats[this.x]}</strong> 
             <br/>Number of Share Classes: <strong>${this.value}</strong>`
        }
      },
      legend: {
      title: {
          text: 'number of<br/>MMF share classes',
          style: {
            fontWeight: 'normal'
          }
        },
        align: 'right',
        y: 80,
        padding: 20,
        verticalAlign: 'middle',
        symbolHeight: 300
      },
      colorAxis: [{
        type: 'linear',
        reversed: false,
        layout: 'vertical',
        stops: [
          [0, '#c8daf9'],[1.0, '#537dca']
        ]
      }],

【问题讨论】：

标签： javascript jquery highcharts heatmap

【解决方案1】：

可以使用thread 上发布的代码：

引用：

Highcharts 没有为图例标题提供此选项。你可以通过在回调函数中翻译你的标题来实现你的目标：

function (chart) {
        var title = chart.legend.title;
        title.translate(x, y);
}

我已将您的代码修改如下：

例子：

legend: {
  title: {
    text: 'number of<br/>MMF share classes',
    style: {
      fontWeight: 'normal'
    }
  },
  align: 'right',
  //y: 80, // <- comment this line.
  padding: 20,
  verticalAlign: 'middle',
  symbolHeight: 300
},

然后：

// After the "highcharts" settings, add: 
, function(chart) {
    var title = chart.legend.title;
    title.translate(0, 370);
  }

这里是modified jsfiddle。

【讨论】：

感谢 Marco 的帮助，非常感谢。