javascript - 在第一个元素中添加 Highcharts 标签

Question

如何向 highcharts 组件中的第一个元素添加标签，如下所示:

我的图表样式代码:

 chart: {
                        height: 143
                    },
                    plotOptions: {
                        area: {
                            fillOpacity: 0.00001
                        },
                        series: {
                            dataLabels: {
                                enabled: true
                            }
                        },
                        line: {
                            connectNulls: false
                        }
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        max: 100,
                        min: 0,
                        tickInterval: 25,
                        labels: {
                            style: {
                                color: '#00cc00'
                            },
                            formatter: function () {
                                var color = '#57b809';
                                if (this.value === 0) {
                                    color = '#a32424';
                                } else if (this.value <= 25) {
                                    color = '#ff9900';
                                } else if (this.value <= 50) {
                                    color = '#ff6600';
                                }

                                return '<span style="fill: ' + color + ';">' + this.value + '</span>';
                            }
                        }
                    }

非常感谢。

Answer 1

使用此答案中的方法:

• Add label to line in Highcharts

您当前的数据是:

[[Date.UTC(2013, 07, 10), 9],[Date.UTC(2013, 07, 11), 22],[Date.UTC(2013, 07, 12), 8],[Date.UTC(2013, 07, 13), 12],[Date.UTC(2013, 07, 14), 71],[Date.UTC(2013, 07, 15), 230],[Date.UTC(2013, 07, 16), 50],[Date.UTC(2013, 07, 17), 670],[Date.UTC(2013, 07, 18), 35]]

因此，您获取第一个数据点，并将其指定为对象而不是 [x,y] 数组，并为该点启用 dataLabels:

{
 x: Date.UTC(2013, 07, 10), 
 y: 9,
 dataLabels: { enabled: true }
}

使用您提供的数据更新了示例:

• http://jsfiddle.net/jlbriggs/vtmqLzer/1/

更新

或者，由于您仅将其添加到第一个点，因此您可以检查标签格式化程序函数中的 point.index，并完全动态地执行此操作，而无需更改数据:

dataLabels: {
 enabled: true,
 formatter: function() {
  return this.point.index == 0 ? this.y : '';
 }
}

更新的示例:

• http://jsfiddle.net/jlbriggs/vtmqLzer/2/