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/

Highcharts - 显示系列

1 个答案: