Question

如果值<＆lt;＆lt;＆lt;＆lt;＆lt;＆gt;最大0.35标签根本不会降低值。我的小提琴：http://jsfiddle.net/Yrygy/527/

我的代码：

var GlobalRotation = -90;
var GlobalAlign = 'right';
var X;
var Y;

function realignLabels(serie) {

    $.each(serie.points, function (j, point) {
        if (!point.dataLabel) return true;

        var max = serie.yAxis.max,
            labely = point.dataLabel.attr('y')

        if (point.y / max < 0.35) {
            point.dataLabel.attr({
                y: labely - 120,
            });
        }
    });
};

$(function() {

  Highcharts.Series.prototype.drawDataLabels = (function(func) {
    return function() {
      func.apply(this, arguments);
      if ((this.options.dataLabels.enabled || this._hasPointLabels) && this.chart.options.chart.realignLabels) {
        realignLabels(this);
      }
    };
  }(Highcharts.Series.prototype.drawDataLabels));

  $('#container').highcharts({
    chart: {
      type: 'line',
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            var max = this.series.yAxis.max,
              color = 'black';
            return '<span style="color: ' + color + '">' + this.y + ' </span>';
          },
          verticalAlign: "top",
        }
      }
    },

    series: [{
      data: [69.9, 71.5, 76.4, 69.2, 74.0, 176.0, 75.6, 48.5, 316.4, 94.1, 95.6, 2.33]
    }]
  });



  $('#container2').highcharts({
    chart: {
      type: 'column',
      realignLabels: true,
      animation: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
   tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:,.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },

        plotOptions: {
            column: {
                animation: true,
                pointPadding: 0.05, // Defaults to 0.1
                groupPadding: 0.05, // Defaults to 0.2

                dataLabels: {
                    enabled: true,
                    rotation: GlobalRotation,
                    color: '#FFFFFF',
                    align: GlobalAlign,
                    verticalAlign: "top",
                    y: 10,
                    inside: false,


                    style: {
                        fontSize: '12px',
                        fontFamily: 'Verdana, sans-serif'
                    },

                    formatter: function () {
                        return Highcharts.numberFormat(this.y, 2);
                    }
                }
            },
        },

     series: [
        {
        name: 'Serie 2',
        data: [120, 125, 130, 140, 120, 120, 130, 125, 130, 125, 120, 130]},
    {
        name: 'Serie 1',
        data: [116, 120, 125, 136, 115, 114, 125, 119, 125, 120, 114, 25]},
        {
        name: 'Serie 1',
        data: [4, 5, 5, 4, 5, 6, 5, 6, 5, 5, 6, 115]}
                ]
  });
});

数据显示在我想要的列内，但我不知道如何显示较低的值。

Answer 1

您的标签已移出视图（dataLabel.attr('y') == -9999）。这是由crop选项引起的。禁用该选项，标签将显示：

    plotOptions: {
        column: {
            animation: true,
            pointPadding: 0.05, // Defaults to 0.1
            groupPadding: 0.05, // Defaults to 0.2

            dataLabels: {
                enabled: true,
                rotation: GlobalRotation,
                color: '#FFFFFF',
                align: GlobalAlign,
                verticalAlign: "top",
                y: 10,
                inside: false,
                crop: false,            // disabled crop


                style: {
                    fontSize: '12px',
                    fontFamily: 'Verdana, sans-serif'
                },

                formatter: function () {
                    return Highcharts.numberFormat(this.y, 2);
                }
            }
        },
    }

演示：http://jsfiddle.net/Yrygy/530/

重新调整高图上条形图内外的标签

1 个答案: