Highcharts柱形图，列中间有其他标签

Question

我的图表显示了包含最小值和最大值的列：

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            color: 'auto'
        }
    }
}

JSFiddle here

如何在相应列的中间显示平均值的其他标签？

Answer 1

您可以在tooltip和plotOptions.series.dataLabels中使用格式化程序并使用 this.point.high 和 this.point.low < / strong>获得系列的高低，并计算平均值：

formatter : function() {
     var res = "";
     if(this.point.high == this.y)
     res += "Average: " + (this.point.high + this.point.low)/2 + "<br><br><br><br>";
     res += this.y;
     return res;                        
}

这里是DEMO

修改

您无法在图表中添加其他 dataLabel 。但是，我设法将平均值添加到您的某个dataLabel，然后使用jQuery我根据每个平均值的数量更改了它的位置：

$.each($( "tspan:contains('Average')" ), 
    function(i, t) { t.setAttribute('dy', parseInt(t.textContent.slice(9))/135); });

请参阅此DEMO

Answer 2

一般来说，它不受支持。但是，您可以扩展Highcharts，因此您将呈现所需的任何文本。您的简单示例：http://jsfiddle.net/8e0m2w5h/8/

(function (H) {
    // wrap drawDataLabels, which will draw dataLabels when required

    H.wrap(H.seriesTypes.columnrange.prototype, 'drawDataLabels', function (p) {
        var x, y, series = this;

        p.call(series);

        // loop over all points to generate or update your label
        H.each(series.data, function (point, i) {
            if (point.dataLabel && point.dataLabelUpper) {
                y = (point.plotLow + point.plotHigh) / 2;
                x = point.shapeArgs.x + point.shapeArgs.width / 2;


                if (point.dataLabelMiddle) {
                    // animate dataLabel after redraw/resize etc.
                    point.dataLabelMiddle.animate({
                        x: x,
                        y: y
                    });
                } else {
                    point.dataLabelMiddle = series.chart.renderer.text((point.low + point.high) / 2, x, y).attr({
                        align: 'center' //align dataLabel in the middle
                    }).add(series.dataLabelsGroup);
                }
            }
        });

    });
})(Highcharts);