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代码

＆gt; size:[30]，用于指定图表的大小。

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

<强> 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: '%'
        }
    }]


});

希望能解决你的问题。

从highcharts gauge chart中删除空格？

1 个答案: