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

Question

我正在使用类似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>

标签： javascriptjqueryhighchartsbullet-chart

Answer 1

填充不适用于 yAxis 上的标签。这可能是使用的副作用tickPositions

定义刻度在轴上的位置的数组。这会覆盖 tickPixelInterval 和 tickInterval 的默认行为。

作为替代解决方案，您可以使用rotation：

yAxis: {
  labels: {
    rotation: -45
  },
...
}

$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      rotation: -45
    }
  },
  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>

JSFiddle 示例： https ://jsfiddle.net/ewolden/jgezt8xm/7/

您还可以使用staggerLines：

yAxis: {
  labels: {
    staggerLines: 2
  },
...
}

$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      staggerLines: 2
    }
  },
  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>

JSFiddle 示例： https ://jsfiddle.net/ewolden/jgezt8xm/5/