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