Highcharts - 如何强制dataLabels在重叠内容时显示标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highcharts - 如何强制dataLabels在重叠内容时显示标签相关的知识,希望对你有一定的参考价值。

我需要显示所有数据(即使一个数据与另一个重叠),但是当框非常接近时,自动消失:

http://jsfiddle.net/vdgphk3L/

enter image description here

documentation推荐allowOverlap,但是当我使用时出现两个值Min和Max,但我只需要Min:

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            allowOverlap: true
        }
    }
}

完整代码:

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange',
      inverted: false,
    },

    xAxis: {
      categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
      alternateGridColor: '#F6F9FC',
    },

    tooltip: {
      shared: true,
      width: 20,
      formatter: function() {
        var retorno = '<strong>Prices</strong>';

        $.each(this.points, function(i, point) {
          if (point.series.name == 'Min' || point.series.name == 'Med' || point.series.name == 'Max') {
            retorno += '<br /><span style="color:' + point.color + '">u25CF</span> ' + point.series.name + ': ' + point.y;
          }
        });

        return retorno;
      }
    },

    plotOptions: {
      columnrange: {
        grouping: false,
        pointWidth: 70
      },
      series: {
        lineWidth: 0.5
      }
    },

    series: [

      // Min
      {
        name: 'Min',
        color: '#C30000',
        minPointLength: 25,
        data: [
          [2000, 2001],
          [5000, 5001],
          [1000, 1001],
          [8000, 8001],
          [3500, 3501]
        ],
        dataLabels: {
          inside: true,
          enabled: true,
          align: 'right',
          format: '{point.y}',
        }
      }, {
        name: 'Min (Line)',
        color: '#C30000',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [2000],
          [5000],
          [1000],
          [8000],
          [3500]
        ]
      },

      // Med
      {
        name: 'Med',
        color: '#215994',
        minPointLength: 25,
        data: [
          [3000, 3001],
          [6001, 6002],
          [3001, 3002],
          [9001, 9002],
          [4001, 4160]
        ],
        dataLabels: {
          enabled: true,
          inside: true,
          align: 'center',
          format: '{point.y}'

        }
      }, {
        name: 'Med (Line)',
        color: '#215994',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [3000],
          [6001],
          [3001],
          [9001],
          [4001]
        ]
      },

      // Max
      {
        name: 'Max',
        color: '#ECEC09',
        minPointLength: 25,
        data: [
          [4000, 4001],
          [7001, 7002],
          [5001, 5002],
          [9501, 9502],
          [4501, 4502]
        ],
        dataLabels: {
          enabled: true,
          inside: true,
          align: 'left',
          format: '{point.y}'
        }
      }, {
        name: 'Max (Line)',
        color: '#ECEC09',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [4000],
          [7001],
          [5001],
          [9501],
          [4501]
        ]
      }

    ]

  });

});
答案

通过删除你添加的dataLabel格式并添加一个新格式,我能够使用allowOverlap实现你的目标。

plotOptions: {
  columnrange: {
    dataLabels: {
      allowOverlap: true,
      formatter: function() {
        if (this.y == this.point.low) { 
        //this is needed because highcharts draws 2 boxes for columnrange
        //1 for high series and 1 for low series
          return this.point.low;
        }
      }
    }
  },
}

在小提琴中,我还将每个系列中的一致情节选项移动到plotOptions中。

function numberToReal(numero) {
  var numero = numero.toFixed(2).split('.');
  numero[0] = "R$ " + numero[0].split(/(?=(?:...)*$)/).join('.');
  return numero.join(',');
}

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange',
      inverted: false,
    },

    xAxis: {
      categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
      alternateGridColor: '#F6F9FC',
    },

    tooltip: {
      shared: true,
      width: 20,
      formatter: function() {
        var retorno = '<strong>Prices</strong>';

        $.each(this.points, function(i, point) {
          if (point.series.name == 'Min' || point.series.name == 'Med' || point.series.name == 'Max') {
            retorno += '<br /><span style="color:' + point.color + '">u25CF</span> ' + point.series.name + ': ' + numberToReal(point.y);
          }
        });

        return retorno;
      }
    },

    plotOptions: {
      columnrange: {
        grouping: false,
        pointWidth: 70,
        minPointLength: 25,
        dataLabels: {
          inside: true,
          enabled: true,
          allowOverlap: true,
          formatter: function() {
            if (this.y == this.point.low) {
        	  return this.point.low;
            }
          }
        }
      },
      series: {
        lineWidth: 0.5
      }
    },

    series: [

      // Min
      {
        name: 'Min',
        color: '#C30000',
        data: [
          [2000, 2001],
          [5000, 5001],
          [1000, 1001],
          [8000, 8001],
          [3500, 3501]
        ],
        dataLabels: {
          align: 'right',
        }
      }, {
        name: 'Min (Line)',
        color: '#C30000',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [2000],
          [5000],
          [1000],
          [8000],
          [3500]
        ]
      },

      // Med
      {
        name: 'Med',
        color: '#215994',
        data: [
          [3000, 3001],
          [6001, 6002],
          [3001, 3002],
          [9001, 9002],
          [4001, 4160]
        ],
        dataLabels: {
          align: 'center',
        }
      }, {
        name: 'Med (Line)',
        color: '#215994',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [3000],
          [6001],
          [3001],
          [9001],
          [4001]
        ]
      },

      // Max
      {
        name: 'Max',
        color: '#ECEC09',
        data: [
          [4000, 4001],
          [7001, 7002],
          [5001, 5002],
          [9501, 9502],
          [4501, 4502]
        ],
        dataLabels: {
          align: 'left',
        }
      }, {
        name: 'Max (Line)',
        color: '#ECEC09',
        type: 'spline',
        dashStyle: 'shortdot',
        data: [
          [4000],
          [7001],
          [5001],
          [9501],
          [4501]
        ]
      }

    ]

  });

});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

以上是关于Highcharts - 如何强制dataLabels在重叠内容时显示标签的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 Datalab 查询 BigQuery 视图?

如何在我的本地 linux 服务器上运行 google-cloud-datalab?

将 Numpy 矩阵从 DataLab 上传到 BigQuery

如何在cloud datalab上创建和使用UDF?

如何在 Google Cloud Datalab 中使用 Bigquery JSON 函数

如何将数据框从 Cloud Datalab 导出到 BigQuery 表?