Highcharts 中心系列标签答案

【问题标题】：High Charts Center Series LabelHighcharts 中心系列标签
【发布时间】：2015-10-01 19:46:54
【问题描述】：

我正在使用 High Charts (http://www.highcharts.com/) 为我的网页获取一些交互式图表。我正在尝试使用列范围图和一系列系列来创建各种时间线。

dataLabels: {
                enabled: true,
                align: 'middle',
                crop: false,
                style: {
                    fontWeight: 'bold'
                },
                verticalAlign: 'middle',
                formatter: function () { return 'CenterThis' }
            }

目前我已经创建了上面的示例。我一直在尝试找到一种方法将给定系列的标签集中在条形本身中，但是它似乎总是想要标记每个数据点。有没有一种我没有看到的简单方法来做到这一点？系列的高位图表文档 (http://api.highcharts.com/highcharts#plotOptions.series.dataLabels) 似乎没有此类属性。

感谢您的帮助。

【问题讨论】：

您的意思是您希望每个条形都有一个数据标签吗？如果是这样，您希望该值是多少？据我所知，没有一个简单的解决方案。我会用一个单独的散点系列来解决这个问题，使用范围的中心作为 y 值，并将数据标签应用于该系列。
是的，我正在尝试为每个条获取单个数据标签。该值将由一个简单的函数确定。你有分散系列的例子吗？

标签： javascript charts highcharts

【解决方案1】：

尝试将inside 设置为真dataLabels。

             ...
             dataLabels: {
                 align: 'center',
                 inside: true,
             ...

API reference，例如：http://jsfiddle.net/asrm5zL0/7/

【讨论】：

问题在于，当您将其添加到更大的系列时，它仍然显示两次，在系列中的每个数据点显示一次。例如：jsfiddle.net/asrm5zL0/5
@NightTrain 我的错误 - 添加 align: 'center' 并且标签居中。（对齐可以是左、右或居中 - 不是中间）答案固定。

【解决方案2】：

使用散点系列分割差异的示例：

http://jsfiddle.net/jlbriggs/asrm5zL0/9/

{
    linkedTo: ':prev',
    name: 'Data Label Series',
    type: 'scatter',
    enableMouseTracking: false,
    marker: { radius : 0 },
    dataLabels: {
        enabled: true,
        align: 'center',
        verticalAlign: 'middle',
        style: {
            fontSize:'.75em',
            fontWeight: 'normal'
        },
        formatter: function () { return 'CenterThis' }
    },
    data: [[3, Date.UTC(2015, 09, 01, 17, 30, 0)]]
}

【讨论】：