如何将highcharts的数据标签定位在x轴的同一侧？

我有一个带有正负值的柱状图。使用默认的dataLabels，将标签保留在列的末尾，这不适合负值，因为它位于x轴下方

$(function () {
$('#container').highcharts({

    chart: {
        type: 'column',
        height: 200,
        borderColor: '#ddd'
    },

    title: {
        text: ''
    },
    legend: {
        padding: 0,
        margin: 5
    },
    credits: {
        enabled: true
    },
    tooltip: {
        enabled: false
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none'
            }
        }
    },
    colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],
    loading: {
        labelStyle: {
            top: '35%',
            fontSize: "2em"
        }
    },
    xAxis: {
        categories: ["7/12", "7/13", "7/14", "7/15", "7/16"]
    },
    series: [{
        "name": "Odometer",
        "data": [{
            "y": 94.98
        }, {
            "y": 182.96
        }, {
            "y": -160.97
        }, {
            "y": -18.00
        }, {
            "y": 117.97
        }]
    }]
});});

---

示例：

添加

plotOptions.column.stacking

为

normal

like，它会工作。

添加

plotOptions.column.stacking

为

normal

like，它会工作。

您可以稍微更改Highcharts.seriesTypes.column.prototype.alignDataLabel函数，因此，如果列的值小于0，则它将不具有对齐列下方的dataLabel的功能

在这里，您可以找到可以帮助您的代码：

      H.seriesTypes.column.prototype.alignDataLabel = function(point, dataLabel, options, alignTo, isNew) {
    var inverted = this.chart.inverted,
      pick = H.pick,
      Series = H.Series,
      series = point.series,
      merge = H.merge,
      dlBox = point.dlBox || point.shapeArgs, // data label box for alignment
      below = false,
      inside = pick(options.inside, !!this.options.stacking), // draw it inside the box?
      overshoot;

    // Align to the column itself, or the top of it
    if (dlBox) { // Area range uses this method but not alignTo
      alignTo = merge(dlBox);

      if (alignTo.y < 0) {
        alignTo.height += alignTo.y;
        alignTo.y = 0;
      }
      overshoot = alignTo.y + alignTo.height - series.yAxis.len;
      if (overshoot > 0) {
        alignTo.height -= overshoot;
      }

      if (inverted) {
        alignTo = {
          x: series.yAxis.len - alignTo.y - alignTo.height,
          y: series.xAxis.len - alignTo.x - alignTo.width,
          width: alignTo.height,
          height: alignTo.width
        };
      }

      // Compute the alignment box
      if (!inside) {
        if (inverted) {
          alignTo.x += below ? 0 : alignTo.width;
          alignTo.width = 0;
        } else {
          alignTo.y += below ? alignTo.height : 0;
          alignTo.height = 0;
        }
      }
    }
    // When alignment is undefined (typically columns and bars), display the individual
    // point below or above the point depending on the threshold
    options.align = pick(
      options.align, !inverted || inside ? 'center' : below ? 'right' : 'left'
    );
    options.verticalAlign = pick(
      options.verticalAlign,
      inverted || inside ? 'middle' : below ? 'top' : 'bottom'
    );
    // Call the parent method
    Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
  };

H.seriesTypes.column.prototype.alignDataLabel=函数（点、数据标签、选项、对齐到、isNew）{
var inversed=this.chart.inversed，
pick=H.pick，
系列=H.系列，
系列=点系列，
merge=H.merge，
dlBox=point.dlBox | | point.shapeArgs，//用于对齐的数据标签框
下=假，
inside=拾取（options.inside，！！this.options.stacking），//在框内绘制它？
超过；
//与柱本身或其顶部对齐
如果（dlBox）{//区域范围使用此方法，但未对齐到
alignTo=合并（dlBox）；
如果（对齐到.y<0）{
alignTo.height+=alignTo.y；
y=0；
}
过冲=alignTo.y+alignTo.height-series.yAxis.len；
如果（超调量>0）{
alignTo.height-=超调量；
}
如果（倒置）{
对齐到={
x:series.yAxis.len-alignTo.y-alignTo.height，
y:series.xAxis.len-alignTo.x-alignTo.width，
宽度：与高度对齐，
高度：与宽度对齐
};
}
//计算对齐框
如果（！内部）{
如果（倒置）{
alignTo.x+=低于？0:alignTo.width；
alignTo.width=0；
}否则{
alignTo.y+=低于？alignTo.height:0；
alignTo.height=0；
}
}
}
//未定义对齐方式（通常为柱和条形）时，显示单个对齐方式
//点低于或高于该点，具体取决于阈值
options.align=拾取(
options.align，！inversed | |内？'center'：下？'right'：'left'
);
options.verticalAlign=拾取(
options.verticalAlign，
倒| |内“中”：下“上”：“下”
);
//调用父方法
Series.prototype.alignDataLabel.call（this，point，dataLabel，options，alignTo，isNew）；
};

我所做的唯一更改是将下面的参数更改为false

在这里，您可以找到一个如何工作的示例：

---

非常感谢，

您可以稍微更改Highcharts.seriesTypes.column.prototype.alignDataLabel函数，这样，如果其值小于0，它就不会具有对齐列下方数据标签的功能

在这里，您可以找到可以帮助您的代码：

      H.seriesTypes.column.prototype.alignDataLabel = function(point, dataLabel, options, alignTo, isNew) {
    var inverted = this.chart.inverted,
      pick = H.pick,
      Series = H.Series,
      series = point.series,
      merge = H.merge,
      dlBox = point.dlBox || point.shapeArgs, // data label box for alignment
      below = false,
      inside = pick(options.inside, !!this.options.stacking), // draw it inside the box?
      overshoot;

    // Align to the column itself, or the top of it
    if (dlBox) { // Area range uses this method but not alignTo
      alignTo = merge(dlBox);

      if (alignTo.y < 0) {
        alignTo.height += alignTo.y;
        alignTo.y = 0;
      }
      overshoot = alignTo.y + alignTo.height - series.yAxis.len;
      if (overshoot > 0) {
        alignTo.height -= overshoot;
      }

      if (inverted) {
        alignTo = {
          x: series.yAxis.len - alignTo.y - alignTo.height,
          y: series.xAxis.len - alignTo.x - alignTo.width,
          width: alignTo.height,
          height: alignTo.width
        };
      }

      // Compute the alignment box
      if (!inside) {
        if (inverted) {
          alignTo.x += below ? 0 : alignTo.width;
          alignTo.width = 0;
        } else {
          alignTo.y += below ? alignTo.height : 0;
          alignTo.height = 0;
        }
      }
    }
    // When alignment is undefined (typically columns and bars), display the individual
    // point below or above the point depending on the threshold
    options.align = pick(
      options.align, !inverted || inside ? 'center' : below ? 'right' : 'left'
    );
    options.verticalAlign = pick(
      options.verticalAlign,
      inverted || inside ? 'middle' : below ? 'top' : 'bottom'
    );
    // Call the parent method
    Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
  };

H.seriesTypes.column.prototype.alignDataLabel=函数（点、数据标签、选项、对齐到、isNew）{
var inversed=this.chart.inversed，
pick=H.pick，
系列=H.系列，
系列=点系列，
merge=H.merge，
dlBox=point.dlBox | | point.shapeArgs，//用于对齐的数据标签框
下=假，
inside=拾取（options.inside，！！this.options.stacking），//在框内绘制它？
超过；
//与柱本身或其顶部对齐
如果（dlBox）{//区域范围使用此方法，但未对齐到
alignTo=合并（dlBox）；
如果（对齐到.y<0）{
alignTo.height+=alignTo.y；
y=0；
}
过冲=alignTo.y+alignTo.height-series.yAxis.len；
如果（超调量>0）{
alignTo.height-=超调量；
}
如果（倒置）{
对齐到={
x:series.yAxis.len-alignTo.y-alignTo.height，
y:series.xAxis.len-alignTo.x-alignTo.width，
宽度：与高度对齐，
高度：与宽度对齐
};
}
//计算对齐框
如果（！内部）{
如果（倒置）{
alignTo.x+=低于？0:alignTo.width；
alignTo.width=0；
}否则{
alignTo.y+=低于？alignTo.height:0；
alignTo.height=0；
}
}
}
//未定义对齐方式（通常为柱和条形）时，显示单个对齐方式
//点低于或高于该点，具体取决于阈值
options.align=拾取(
options.align，！inversed | |内？'center'：下？'right'：'left'
);
options.verticalAlign=拾取(
options.verticalAlign，
倒| |内“中”：下“上”：“下”
);
//调用父方法
Series.prototype.alignDataLabel.call（this，point，dataLabel，options，alignTo，isNew）；
};

我所做的唯一更改是将下面的参数更改为false

在这里，您可以找到一个如何工作的示例：

致以最良好的祝愿