Highcharts - 显示一系列数据点之间的百分比差异

Question

我在折线图上绘制了一系列数字。我想做的是在每个点之间绘制的线上显示系列中每个后续数据点之间的百分比差异。所以我的数据看起来像这样：

[10,15,20,25,30,35]

例如，在每个点之间的线上，我想显示 10 到 15 或 50% 之间的百分比差异。或介于 20 到 25 (25%) 之间。

有没有办法做到这一点？

Answer 1

一种解决方案是计算系列并覆盖该系列的 dataLabels：

$(function () {
    var data = [10,15,20,25,30,35]; // original data
    var data2 = [];  // calculated series
    var perDiff;  // percent difference
    for (var i=0;i<data.length-1;i++) {
        // calculate the % diff, we're going to use this as the point name
        perDiff  = (data[i+1] - data[i]) / data[i] * 100;
        data2.push({
            // this is assuming a category xAxis, if your original array has x & y values, you'll need to do a little more math
            x : i + 0.5,
            // find the half way mark
            y : (data[i] + data[i+1]) /2,
            // set the name, so we can use it in the dataLabel formatter
            name : Math.round(perDiff) + "%"
        });
    }
    $('#container').highcharts({
        chart: {
            type: 'line'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: 'Primary Axis'
            },
            gridLineWidth: 0
        }],
        tooltip: {
            enabled: false
        },
        plotOptions: {
        },
        series: [{
            data: data,
            dataLabels : {
                enabled: true
            }
        }, {
            name: 'Percent Difference',
            data: data2,
            type: 'scatter',
            color: 'grey',
            dataLabels: {
                enabled: true,
                color: 'grey',
                formatter : function() {
                    return this.point.name;
                }
            }

        }]
    });
});

http://jsfiddle.net/blaird/xx84fwkp/1/