时间戳

首页 > 解决方案 > 在条形图顶部添加数据文本（垂直） - Highcharts 条形图

javascript - 在条形图顶部添加数据文本（垂直） - Highcharts 条形图

问题描述

我正在使用 Highcharts 条形图（垂直），我希望成员数据显示在每个条形图的顶部（悬停在我们将保持的状态）。我用 plotOptions 尝试了各种方法，但无法让它在条形图视图顶部显示成员数据。第一个链接是我的工作代码。

    **https://codepen.io/jenfloods/pen/jOyXEQd**

上面的第二个链接是示例，我希望数据文本显示在带有白色阴影字母的条形图顶部，但这将适用于我的垂直条，而不是本示例所示的水平条。

**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**

任何人都有一个例子或者可以使用我的代码来实现它？

标签： javascripthighchartsbar-chart

解决方案

您需要为系列启用数据标签并使用如下配置：

plotOptions: {
  series: {
    ...,
    dataLabels: {
      rotation: 90,
      verticalAlign: 'top',
      y: 10,
      align: 'left',
      inside: true,
      enabled: true,
      color: '#FFFFFF'
    },
  }
}

现场演示：http: //jsfiddle.net/BlackLabel/y04j6z3m/

API 参考： https ://api.highcharts.com/highcharts/plotOptions.column.dataLabels

推荐阅读