如何在图例上方添加文本并在 Highcharts 中对齐项目

Question

附件是图像，是我的预期结果。我想在图例上方添加文本“车辆”和“百分比”，并将它们与图例文本和数字对齐。如何使用 Highcharts 做到这一点？

演示

Highcharts.chart("container", {
  colors: ["#01BAF2", "#71BF45", "#FAA74B", "#B37CD2"],
  chart: {
    type: "pie"
  },
  accessibility: {
    point: {
      valueSuffix: "%"
    }
  },
  title: {
    text: "February 2020 Norway passenger auto registrations"
  },
  subtitle: {
    text:
      'Source:<a href="https://cleantechnica.com/2020/03/07/pioneering-norway-rises-above-68-plug-in-vehicle-market-share-in-february/">cleantechnica</a>'
  },
  tooltip: {
    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>"
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: "pointer",
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name + ' ' + this.y;
        } 
      },
      showInLegend: true
    }
  },
  series: [
    {
      name: "Registrations",
      colorByPoint: true,
      innerSize: "75%",
      data: [
        {
          name: "EV",
          y: 68.1
        },
        {
          name: "Hybrids",
          y: 11.0
        },
        {
          name: "Diesel",
          y: 11.2
        },
        {
          name: "Petrol",
          y: 9.7
        }
      ]
    }
  ],
  legend: {
    align: "right",
    verticalAlign: "middle",
    enabled: true,
    itemWidth: 200,

    useHTML: true,
    labelFormatter: function () {
      return this.name + " " + Math.round(this.percentage * 100) / 100 + "%";
    }
  }
});

我尝试过使用 labelFormatter 和图例文本，但没有任何东西符合我的需要。

Answer 1

您可以在图例中使用标题属性。 试试这个：

legend: {
align: "right",
verticalAlign: "middle",
enabled: true,
itemWidth: 200,
useHTML: true,
title: {
  text: 'Vehicle Percentage'
},
labelFormatter: function () {
  return this.name + " " + Math.round(this.percentage * 100) / 100 + "%";
}}