Question

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

我无法实现的部分是针接触粉红色的外弧。要更改数字8的字体大小（它应以较大的字体显示8％），要在圆弧的右端打印100％，并在指示的中心显示一些文本。

我尽力解决这些问题，但没有运气。我很欣赏任何关于如何前进的建议。提前谢谢！

<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。

使用highcharts获取Solid Guage的刻度位置和标签

1 个答案: