Question

我有一个highcharts分组柱形图，x轴上的每个值都有两列。我希望能够在每个组上方添加一个标签，两者之间的差异为百分比。我似乎无法找到任何方法来引用formatter-option中的两列。

这是我遇到问题的部分：

column: {
    dataLabels: {
        formatter: function()
        {                                
            return this.y;
        }
    }
}

这应该是差异。

目前的情况如此http://jsfiddle.net/LLExL/4548/

我想要改变的是两列中每一列上面的标签，差异百分比。

Answer 1

在formatter回调中，您可以使用series.chart.series[1].yData属性获取第二列/系列的y值。 yData是包含所有y值的数组。然后，您可以使用point.index属性来获取第二列/系列的对应点。

column: {
    dataLabels: {
        formatter: function()
        {   
            var firstColumnValue = this.y;
            var secondColumnValue = this.series.chart.series[1].yData[this.point.index];
            var yourCalculation = (firstColumnValue - secondColumnValue) / firstColumnValue * 100;
            return yourCalculation.toFixed(2) + '%';
        }
    }
}

更新了JSFiddle

Answer 2

一种可能性是预先计算所有差异，并在formatter中简单地引用它们。例如，在变量中定义series，并在其上循环以创建差异的单独diffs数组，如下所示：

var series = [{
    name: 'Omsetning',
    data: [
        // ...
    ]
    }
    // ...
];

var diffs = [];

for(i = 0; i < series[0].data.length; i++) {
    var v1 = series[0].data[i].y;
    var v2 = series[1].data[i].y;
    diffs.push( (Math.abs(v1-v2) / ((v1+v2) / 2)) * 100 );
}

$('#container').highcharts({
    plotOptions: {
        column: {
            dataLabels: {
                formatter: function()
                {                                
                    return Highcharts.numberFormat(diffs[this.x])+"%";
                }
            }
        }
    }
    series: series
    // ...
});

请参阅this JSFiddle demonstration的外观。

Highcharts分组列标签

2 个答案: