javascript - Highcharts 实心仪表，在条形图上带有刻度线

Question

我正在尝试使用 Highchart 的 Solid Gauge 图表来呈现如下内容:

我得到的最接近的是 this jsfiddle :

Highcharts.chart("container", {
  chart: {
    type: 'solidgauge'
  },
  tooltip: {
    enabled: false
  },
  title: null,
  credits: {
    enabled: false
  },
  pane: {
    size: '100%',
    startAngle: -120,
    endAngle: 120,
    background: {
      innerRadius: '75%', 
      outerRadius: '100%',
      backgroundColor: '#eeeeee',
      borderWidth: 0,
      shape: 'arc'
    }
  },
  plotOptions: {
    solidgauge: {
      innerRadius: '75%',
      radius: '100%',
      dataLabels: {
        enabled: false
      }
    }
  },
  yAxis: {
    labels: {
      enabled: false
    },      
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    lineColor: 'transparent',
    minorTickLength: 0,
    tickPositions: [35],
    tickColor: '#000000',
    tickPosition: 'inside',
    tickLength: 60,
    tickWidth: 4
  },
  series: [{
    data: [40]
  }]
});

看起来像:

主要问题是黑色刻度线:

• 它在栏后面绘制，但我希望它在栏上方绘制
• 它不在栏的中心

如何使用 Highcharts 完成此操作？

Answer 1

在 plotOptions 和 yAxis 中添加 zIndex

fiddle演示

 plotOptions: {
    solidgauge: {
      innerRadius: '75%',
      radius: '100%',
      dataLabels: {
        enabled: false,
        useHTML: true,
        zIndex: 1000 //added
      }
    }
  },
  yAxis: {
    labels: {
      enabled: false
    },      
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    lineColor: 'transparent',
    minorTickLength: 0,
    tickPositions: [35],
    tickColor: '#000000',
    tickPosition: 'inside',
    tickLength: 50,
    tickWidth: 8,
    zIndex: 100, //added
  },