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

Question

我的图表显示具有最小值和最大值的列：

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

JSFiddle在这里

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

Answer 1

您可以在tooltip和plotOptions.series.dataLabels使用格式化程序 ，并使用this.point.high和this.point.low获得意向的高低并计算平均值：

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;                        
}

这是演示

编辑：

您不能在图表中添加另一个dataLabel 。 但是，我设法将平均值添加到您的一个dataLabels中，然后使用jQuery我考虑了每个平均值的数量来更改了位置：

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

请看这个演示

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);