时间戳

首页 > 解决方案 > HighCharts Bullet Chart 显示目标的数据标签

javascript - HighCharts Bullet Chart 显示目标的数据标签

问题描述

我使用 Highchart 项目符号模块来创建多个项目符号图表（水平或垂直）。这里的图表示例：https ://jsfiddle.net/vegaelce/n5wjaf2e/

我可以使用以下选项为主要度量值添加数据标签：

plotOptions: {
        series: {           
            dataLabels: {
                enabled: true,
                inside: true
            },

但我想显示主要度量的标签和目标的标签，但是没有选项可以添加目标度量的数据标签（我的 jsfiddle 上的橙色刻度度量）。

我怎样才能做到这一点 ？

提前致谢

标签： javascripthighchartslabeltargetbullet

解决方案

您可以将dataLabels配置定义为一个对象数组，这意味着dataLabel可以添加多个，接下来使用dataLabels.formatter回调返回目标值。

  dataLabels: [{
    enabled: true,
    inside: true
  }, {
    enabled: true,
    formatter() {
        //console.log(this)
        return this.point.target
    }
}],

演示：https ://jsfiddle.net/BlackLabel/2fxL03gz/

API：https ://api.highcharts.com/highcharts/series.line.dataLabels.formatter

推荐阅读