Question

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

我们如何实现这一目标？

Answer 1

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

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

然后为每个系列的数据数组中的最后一个点启用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>';
      }
    }
  }
}

小提琴：

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

输出示例：

Answer 2

获取最后一个点，其中包含plotX和plotY属性，然后使用渲染绘制标签。

const options = {
  chart: {
    events: {
      load() {
        const chart = this
        const series = chart.series

        series.forEach((s) => {
          const len = s.data.length
          const point = s.data[len - 1]
          console.log(point)

          chart.renderer.text(
            point.series.name,
            point.plotX + chart.plotLeft + 10,
            point.plotY + chart.plotTop - 10
          )
          .attr({
            zIndex: 5
          })
          .add()
        })
      }
    }
  },
  xAxis: {
    max: 5
  },
  series: [{
    data: [30, 70, 50, 90]
  }, {
    data: [60, 100, 80, 120]
  }, {
    data: [80, 150, 90, 180]
  }]
}

const chart = Highcharts.chart('container', options)

实例：

https://jsfiddle.net/479vdhm3/

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

2 个答案: