高图表柱形图，柱形中间有其他标签

Highcharts column chart with additional labels in the middle of columns

本文关键字：其他 标签 中间 柱形图 高图表      更新时间：2023-09-26

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

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

JSFiddle here

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

您可以在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 中，然后使用jQuery考虑到每个平均值的数量，我更改了它的位置：

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

请看这个演示

通常，它不受支持。但是，您可以扩展高图表，以便呈现所需的任何文本。为您提供简单示例：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);
相关文章：