Highcharts显示实心仪表图表中心的百分比

时间:2016-07-18 08:13:41

标签: javascript html css highcharts

我对Highcharts很新。我正在尝试使用实心仪表。问题是文本的百分比不在中心。无论如何将百分比放在图表的中心?

以下是代码:

$(function () {
        Highcharts.chart('container', {

            chart: {
                type: 'solidgauge'
            },

            title: {
                text: ''
            },

            tooltip: {
                borderWidth: 0,
                backgroundColor: 'none',
                shadow: false,
                style: {
                    fontSize: '16px'
                },
                pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
                positioner: function (labelWidth, labelHeight) {
                    return {
                        x: 200 - labelWidth / 2,
                        y: 180
                    };
                }
            },

            pane: {
                center: ['50%', '27%'],
                startAngle: 0,
                endAngle: 360,
                background: [{ // Track for Stand
                    outerRadius: '62%',
                    innerRadius: '38%',
                    backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
                    borderWidth: 0,

                }],

            },

            yAxis: {
                min: 0,
                max: 100,
                lineWidth: 0,
                tickPositions: []
            },

            plotOptions: {
                solidgauge: {
                    borderWidth: '34px',
                    dataLabels: {
                        enabled: false
                    },
                    linecap: 'round',
                    stickyTracking: false
                }
            },

            series: [{
                name: 'Stand',
                borderColor: Highcharts.getOptions().colors[2],
                data: [{
                    color: Highcharts.getOptions().colors[2],
                    radius: '50%',
                    innerRadius: '50%',
                    y: 50
                }]
            }]
        },
});

标签选项中的x和y可以设置位置,但我希望它是动态的。 其次,我希望它始终显示出来。以下是上述代码的结果。

Chart

0 个答案:

没有答案