Question

我有一个正负值的柱形图。使用默认的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/

Answer 1

将plotOptions.column.stacking添加为normal，如might require type conversions，它会有效。

Answer 2

您可以更改一点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/

致以最诚挚的问候，

如何在x轴的同一侧定位dataLabel for highcharts？

2 个答案: