javascript - Highcharts折线图，在折线系列末尾显示系列名称

Question

我们对折线图的要求如下。我们正在使用 Highcharts 。我们的要求是图表应在行尾显示系列名称，如下图所示。

我们怎样才能实现这一目标？

Answer 1

作为 renderer() 的替代方案，我发现使用 dataLabels 来实现此目的很方便。

想法是在 plotOptions 中禁用 dataLabels，但无论如何定义位置和格式。

然后为每个系列数据数组中的最后一个点启用dataLabels。

示例:

plotOptions: {
  series: {
    dataLabels: {
      enabled: false,
      crop: false,
      overflow: 'none',
      align: 'left',
      verticalAlign: 'middle',
      formatter: function() {
        return '<span style="color:'+this.series.color+'">'+this.series.name+'</span>';
      }
    }
  }
}

fiddle :

• http://jsfiddle.net/jlbriggs/pgo7pedn/

输出示例: