Highcharts折线图，在折线系列的末尾显示系列名称 | 在折线系列的末尾显示系列名称

本文介绍了Highcharts折线图，在折线系列的末尾显示系列名称的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

We have requirement for line chart as below. We are using highcharts. Our requirement is that chart should display series name at the end of line as displayed in below images.

我们如何实现这一目标?

How can we achieve this?

推荐答案

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

As an alternative to the renderer(), I find it convenient to use the dataLabels for this purpose.

这个想法是要禁用plotOptions中的dataLabels，但是仍然要定义位置和格式.

The idea being to disable dataLabels in the plotOptions, but define the position and format anyway.

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

Then enable the dataLabels for the last point in each series' data array.

示例:

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

提琴:

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

输出示例:

这篇关于Highcharts折线图，在折线系列的末尾显示系列名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！