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

Question

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

有什么方法可以在子弹图上提供填充，这样数据就不会重叠吗？

$("#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>

Answer 1

我用 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 位置的 50px 以内时，我只是在当前位置再添加 50px。您可以根据需要更改此值。

$("#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>