Highcharts 格式化数据标签

Question

我已经使用 highcharts 编辑了一个图表，现在我想在最后一个数据标签上显示一些具有实际值的文本。

这里是 jsfiddle 编辑

代码：

$(function () {
$('#container').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: ''
    },
    credits:{
        enabled:false
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
        min:0,
        max:100,
        title: {
            text: 'Score ( % )'
        },
        labels:{
            enabled:false
        }
    },
    legend:{
        enabled:false
    },
    plotOptions: 
    {
        line: 
        {
            lineWidth:2,
            dataLabels: 
            {
                enabled: true,
                formatter:function() 
                {
                    var pcnt = (this.y);
                    return Highcharts.numberFormat(pcnt,0) + '%';
                }
            },
            enableMouseTracking: true
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 30, 7.4, 21.5, 6]
    }]
});
 });

在此图中，最后一个数据标签是 6%。我想在不改变休息的情况下显示 abc 6%。

可能的解决方案是什么？任何帮助

Answer 1

您可以尝试变通方法，这取决于您整个代码的使用情况。

我已经更新了你的fiddle：http://jsfiddle.net/3h7x9jst/3/

逻辑：

您必须获取数组的计数并将其存储在
jquery (cnt)。将指针变量 (pntr) 初始化为 0 值递增
pntr 总是在格式化程序函数中检查 pntr 是否等于
数组的计数，即要绘制的最后一个值，因此更改标签。

代码：

$(function () {
var cnt = 7; // Count of the array should be here
var pntr = 0;
$('#container').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: ''
    },
    credits:{
        enabled:false
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    yAxis: {
        min:0,
        max:100,
        title: {
            text: 'Score ( % )'
        },
        labels:{
            enabled:false
        }
    },
    legend:{
        enabled:false
    },
    plotOptions: 
    {
        line: 
        {
            lineWidth:2,
            dataLabels: 
            {
                enabled: true,
                formatter:function() 
                {
                    pntr++;
                    var pcnt = (this.y);
                    if(pntr == cnt)
                    {
                        return 'Your Text Here' + Highcharts.numberFormat(pcnt,0) + '%';
                    }else{
                        return Highcharts.numberFormat(pcnt,0) + '%';
                    }
                }
            },
            enableMouseTracking: true
        }
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 30, 7.4, 21.5, 6]
    }]
});
});

Highcharts 格式化数据标签

Highcharts formatting data labels

highcharts