highcharts - 从 highcharts 仪表图中删除空格？

Question

我想从使用 highcharts 库创建的半圆形仪表图中删除空白。

html:

<div id="gauge_div" style="width: 100%;">

JSBin

Answer 1

试试下面的代码..

定义height，HTML div以便您可以创建具有特定维度的图表

HTML

<div id="gauge_div" style="height: 200px;">

使用Javascript代码pane

> size:[30]用于给出我们图表的大小。

> center: ['50%', '90%']是饼图相对于绘图区域的直径。可以是百分比或像素值。您可以使用 向上/向下或向右/向左移动图表center。 Jsbin 演示

jQuery

 $('#gauge_div').highcharts({
    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: ''
    },

    pane: {
      size:[30],
        startAngle: -90,
        center: ['50%', '90%'],
        endAngle: 90,
      background: {backgroundColor: 'white', borderWidth: 0,innerradious:'10%'}
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 100,

        minorTickInterval: 'auto',
        minorTickWidth: 0,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 0,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
            step: 2,
            rotation: 'auto'
        },
       /* title: {
            text: ''
        },*/
        plotBands: [{
            from: 0,
            to: 75,
            color: '#5c90e3' // blue
        }, {
            from: 75,
            to: 100,
            color: '#e6e6e6' 
        }]        
    },
    plotOptions: {
        gauge: {

            dataLabels: {
                enabled: false      
            },
            pivot: {
                radius: 0
            },
            dial: {
                backgroundColor: 'orange'   
            }
        }
    },
    series: [{

        name: 'Progress',
        data: [75],
        tooltip: {
            valueSuffix: '%'
        }
    }]


});

希望能解决你的问题。