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/

在第一个元素

1 个答案: