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

Question

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

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']
        ]
      }],

Answer 1

一个选项可以使用此 thread 上发布的代码：

引用：

Highcharts is not providing this option for legend title. You can achieve your goal by translating your title in callback function:

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.

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

How to position heatmap legend title in different position?

javascript

jquery

heatmap

highcharts