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

我需要显示所有数据（即使一个与另一个重叠），但当框非常接近时，其中一个数据会自动消失：

推荐的

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]
        ]
      }

    ]

  });

});

$（函数（）{
$（“#容器”）。高图({
图表：{
类型：“columnrange”，
倒：错，
},
xAxis：{
类别：[‘标题1’、‘标题2’、‘标题3’、‘标题4’、‘标题5’]，
alternateGridColor:“#F6F9FC”，
},
工具提示：{
分享：是的，
宽度：20，
格式化程序：函数（）{
var Returno='价格'；
$.each（this.points，function（i，point）{
如果（point.series.name=='Min'| | point.series.name=='Med'| | point.series.name=='Max'）{
returno+='
\u25CF'+point.series.name+'：'+point.y；
}
});
返回号；
}
},
打印选项：{
列范围：{
分组：false，
点宽度：70
},
系列：{
线宽：0.5
}
},
系列：[
//闵
{
名称：“Min”，
颜色：'#C30000'，
最小点长度：25，
数据：[
[2000, 2001],
[5000, 5001],
[1000, 1001],
[8000, 8001],
[3500, 3501]
],
数据标签：{
里面:对,，
启用：对，
对齐：“右”，
格式：“{point.y}”，
}
}, {
名称：'Min（行）'，
颜色：'#C30000'，
类型：“样条线”，
dashStyle:“短点”，
数据：[
[2000],
[5000],
[1000],
[8000],
[3500]
]
},
//医学
{
姓名：'Med'，
颜色：“#215994”，
最小点长度：25，
数据：[
[3000, 3001],
[6001, 6002],
[3001, 3002],
[9001, 9002],
[4001, 4160]
],
数据标签：{
启用：对，
里面:对,，
对齐：'居中'，
格式：“{point.y}”
}
}, {
名称：'Med（线路）'，
颜色：“#215994”，
类型：“样条线”，
dashStyle:“短点”，
数据：[
[3000],
[6001],
[3001],
[9001],
[4001]
]
},
//马克斯
{
名称：“Max”，
颜色：“#ECEC09”，
最小点长度：25，
数据：[
[4000, 4001],
[7001, 7002],
[5001, 5002],
[9501, 9502],
[4501, 4502]
],
数据标签：{
启用：对，
里面:对,，
对齐：“左”，
格式：“{point.y}”
}
}, {
名称：“最大（线）”，
颜色：“#ECEC09”，
类型：“样条线”，
dashStyle:“短点”，
数据：[
[4000],
[7001],
[5001],
[9501],
[4501]
]
}
]
});
});

通过删除您添加的

数据标签

格式并添加一个新的格式，我可以使用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;
        }
      }
    }
  },
}

在fiddle中，我还将一致的绘图选项从每个系列中移到

plotOptions

中

函数numberToReal（numero）{
var numero=固定（2）分割（'.'）；
数字[0]=“R$”+数字[0]。拆分（/（？=（？：…）*$）/）。加入（'.'）；
返回numero.join（'，'）；
}
$（函数（）{
$（“#容器”）。高图({
图表：{
类型：“columnrange”，
倒：错，
},
xAxis：{
类别：[‘标题1’、‘标题2’、‘标题3’、‘标题4’、‘标题5’]，
alternateGridColor:“#F6F9FC”，
},
工具提示：{
分享：是的，
宽度：20，
格式化程序：函数（）{
var Returno='价格'；
$.each（this.points，function（i，point）{
如果（point.series.name=='Min'| | point.series.name=='Med'| | point.series.name=='Max'）{
returno+='
\u25CF'+point.series.name+'：'+numberToReal（point.y）；
}
});
返回号；
}
},
打印选项：{
列范围：{
分组：false，
点宽度：70，
最小点长度：25，
数据标签：{
里面:对,，
启用：对，
allowOverlap：是的，
格式化程序：函数（）{
if（this.y==this.point.low）{
返回此.point.low；
}
}
}
},
系列：{
线宽：0.5
}
},
系列：[
//闵
{
名称：“Min”，
颜色：'#C30000'，
数据：[
[2000, 2001],
[5000, 5001],
[1000, 1001],
[8000, 8001],
[3500, 3501]
],
数据标签：{
对齐：“右”，
}
}, {
名称：'Min（行）'，
颜色：'#C30000'，
类型：“样条线”，
dashStyle:“短点”，
数据：[
[2000],
[5000],
[1000],
[8000],
[3500]
]
},
//医学
{
姓名：'Med'，
颜色：“#215994”，
数据：[
[3000, 3001],
[6001, 6002],
[3001, 3002],
[9001, 9002],
[4001, 4160]
],
数据标签：{
对齐：'居中'，
}
}, {
名称：'Med（线路）'，
颜色：“#215994”，
类型：“样条线”，
dashStyle:“短点”，
数据：[
[3000],
[6001],
[3001],
[9001],
[4001]
]
},
//马克斯
{
名称：“Max”，
颜色：“#ECEC09”，
数据：[
[4000, 4001],
[7001, 7002],
[5001, 5002],
[9501, 9502],
[4501, 4502]
],
数据标签：{
对齐：“左”，
}
}, {