javascript - 使用 Highcharts 获取 Solid Guage 的刻度位置和标签

Question

我正在尝试使用 Highcharts 构建一个量表。

我无法实现的部分是针接触到粉红色的外弧。改变数字 8 的字体大小(它应该以更大的字体显示 8%)，在圆弧的右端打印 100%，并在 guage 的中心显示一些文本。

我尽力解决了这些问题，但没有成功。我感谢有关如何前进的任何建议。提前致谢!

http://jsfiddle.net/q5hgky25/1/

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<div id="business-metrics-guage"></div>

$(function() {
    $('#business-metrics-guage').highcharts({
        chart: {
            type: 'solidgauge',
            spacingTop: 0,
            spacingRight: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            plotBorderWidth: 0,
            marginRight: 0,
            marginLeft: 0,
            marginTop: 0,
            marginBottom: 0,
            backgroundColor: 'none'
        },
        tooltip: {
            enabled: false
        },
        title: {
            text: 'Test'
        },
        credits: {
            enabled: false
        },
        pane: {
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                innerRadius: '42%',
                outerRadius: '41%',
                backgroundColor: '#000',
                shape: 'arc'
            }
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        yAxis: {
            labels: {
                enabled: true,
                x: 10,
                y: -10
            },
            //tickPositions: [80, 90],           
            min: 0,
                max: 50,
                gridLineColor: 'transparent',
                lineColor: 'transparent',
                minorTickLength: 0,
                tickInterval: 67,
                tickPositions: [8], //8%
                tickColor: '#000000',
                tickPosition: 'inside',
                tickLength: 50,
                tickWidth: 2
            },
            series: [{
                data: [{
                    y: 8,
                    color: '#f95d6f'
                }], //y 8%
                dataLabels: [{
                    useHTML: true,
                    format: '<div style="text-align:center">Total here</div>'
                }],
                radius: '45%'
            }]
        });
    });

Answer 1

首先，您的问题中有四个问题，您应该在不同的问题中提出每个问题。

无论如何，为了让针接触粉红色的外弧，您可以使用 plotOptions.solidgauge.innerRadius 并更改 pane 和它的背景半径以适应您想要的输出:

plotOptions: {
    solidgauge: {
        innerRadius: '75%'
    }
}

对于标签的字体大小及其 % 后缀，使用 yAxis.labels.format 和style.fontSize:

yAxis: {
    labels: {
        enabled: true,
        x: 10, y: -10,
        format: '{value} %',
        style: {
            fontSize: 16
        }
    }
}

要在右端显示 100 %，将 100 添加到 yAxis 的 tickPositions:

tickPositions: [8, 100]

对于居中的一些文字，可以使用subtitle:

subtitle: {
    text: 'Total here'
}

这是 DEMO .