0

我有一个带有正值和负值的柱形图。使用默认的 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
        }]
    }]
});});

示例：http: //jsfiddle.net/absessive/NKXRk/54/

4

2 回答 2

2

plotOptions.column.stacking像normal这样添加，它将起作用。

于 2016-07-08T07:19:47.530 回答
0

您可以稍微更改一下 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);
  };

我所做的唯一更改是我已将以下参数更改为 false。

在这里你可以找到一个例子它是如何工作的：http: //jsfiddle.net/NKXRk/59/

最好的祝福，

于 2016-07-08T09:07:02.697 回答