javascript - 如何在highchart上为tickPosition提供填充？

我正在使用bullet chart的highchart与进度表类似地工作，我以某种方式使它看起来像进度表，但是问题是当我的序列数据接近相等时，它们会相互重叠。请看附件图片



有什么方法可以在项目符号图表上提供填充，以便数据不会重叠？

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

最佳答案

我用jQuery提出了这个解决方案。可能会有更好的方法，但是它应该可以按预期工作:

var lastXPos = 0;
$.each($('#progress svg g text'),function(a,b)
{
  var curXPos = $(this).offset().left;
  if(curXPos - lastXPos < 50)
  {
    $(this).attr('x', (curXPos + 50));
  }
  lastXPos = curXPos;
});

当文本的最后一个x位置在当前x位置的50像素之内时，我只需向当前位置添加另一个50像素。您可以根据需要更改此值。

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });
    var lastXPos = 0;
    $.each($('#progress svg g text'),function(a,b)
    {
      var curXPos = $(this).offset().left;
      if(curXPos - lastXPos < 50)
      {
        $(this).attr('x', (curXPos + 50));
      }
      lastXPos = curXPos;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>