Javascript 在海图中如何在实心量规周围画刻度线

我正在制作highcharts，对它有太多的依赖，所以我不能使用其他插件

$(function () {

    var gaugeOptions = {

        'chart': {
            'type': 'solidgauge'
        },

        'title': null,

        'tooltip': {
            'enabled': false
        },

        'pane': {
            'center': ['50%', '50%'],
            'size': '100px',
            'startAngle': 0,
            'endAngle': 360,
            'background': {
                'backgroundColor': '#EEE',
                'innerRadius': '90%',
                'outerRadius': '100%',
                'borderWidth': 0
            }
        },

        'yAxis': {
            'min': 0,
            'max': 100,
            'labels': {
                'enabled': false
            },

            'lineWidth': 0,
            'minorTickInterval': null,
            'tickPixelInterval': 400,
            'tickWidth': 0
        },

        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },

        'series': [{
            'name': 'Speed',
            'data': [50],
            'dataLabels': {
                'enabled': true,
                useHTML: true,
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
                borderWidth: 0

            }

        }]
    };
    debugger;

    $('#Chart2').highcharts(gaugeOptions);

});



$(function () {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '50%'],
            size: '40%',
            startAngle: 0,
            endAngle: 360,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                enabled: false
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: -20,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };

    // The speed gauge
    $('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: 0,
            max: 200,
            title: {

            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                format: '<div ><span style="font-size:15px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
                   '<span style="font-size:12px;color:Black">%</span></div>',
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    }));



});

这是我正在使用的图表，我想在圆圈的上边打勾，就像这样

也像这样

---

感谢您的帮助

在yAxis中尝试以下代码：

  tickLength: 5,
  tickWidth: 4,
  tickColor: 'black',
  tickPosition: 'outside',
  minorTickLength: 0,
  tickInterval: 1,

这是我的工作

更新小提琴：

滴答声位置：在里面意味着你会在里面得到滴答声

---

tickPosition:outside意味着您将在外部获得记号

您需要定义一个单独的窗格和轴，并将轴偏移属性设置为正值（对于窗格外部的记号）或负值（对于窗格内部的记号）

窗格配置：

pane: [{
  size: '40%',
  center: ['50%', '50%'],
  background: {
    innerRadius: '60%',
    outerRadius: '100%'
  }
}, {
  size: '40%',
  background: null
}]

轴配置：

    yAxis: [{
  min: 0,
  max: 200,
  tickWidth: 0,
  minorTickInterval: null,
  labels: {
    enabled: false
  },
  stops: [
    [0.1, '#55BF3B'], // green
    [0.5, '#DDDF0D'], // yellow
    [0.9, '#DF5353'] // red
  ]
}, {
  linkedTo: 0,
  pane: 1,
  offset: 20, // offset property controls the distance from the pane
  tickInterval: 10,
  minorTickInterval: null,
  lineWidth: 0,
  labels: {
    enabled: false
  }
}],

蜱在外面：

---

滴答声在里面：

但它并没有在整个圆圈中出现