Question

我创建了一个如下图所示的仪表图。

我能够实现的目标

我现在面临的问题

我目前面临的问题（如下图所示）：

1。无法删除底部边框

2。无法向下移动表盘

期望的结果

有些人可以帮助我达到预期的效果，请点如下吗？

HTML

<div id="gauge-container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

脚本

$(function () {
    $('#gauge-container').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: null,
        },
        title: {
            text: null
        },
        background: null,
        credits: {
            enabled: false
        },
        pane: {
            startAngle: -120,
            endAngle: 120,
            background: {
                backgroundColor: 'transparent', 
                borderWidth: 10,
                borderColor: '#e7f2f8', 
                innerradious:'10%'
            },
            /*background: [{
                backgroundColor: 'white',
                outerRadius: '19%'
            }, {
                borderWidth: 15,
                borderColor: '#e7f2f8',
            }, {
                // default background
            }, {
                backgroundColor: null,
                borderColor: '#ffffff',
            }]*/
        },

        yAxis: {
            min: 0,
            max: 100,
            lineColor: null,
            minorTickInterval: 'auto',
            minorTickWidth: 0,
            minorTickLength: 0,
            minorTickPosition: 'outside',
            minorTickColor: '#fff',
            tickPixelInterval: '30',
            tickWidth: 0,
            tickLength: 0,
            tickPosition: 'inside',
            tickColor: '#fff',
            //offset: -2,
            labels: {
                step: 4,
                //rotation: 'auto',
                distance: -33,
                useHTML: true,
                //y: 10,
                style: {
                    fontFamily: 'Roboto',
                    fontWeight: '400',
                    fontSize: '18px',
                    textShadow: '0',
                    color: '#aaaaaa'
                }
            },
            title: { text: null },
            plotBands: [{
                from: 0,
                to: 20,
                color: '#99cc01',
                innerRadius: '85%',
                outerRadius: '105%',
                //borderWidth: 5,
                //borderColor: '#f00',
            }, {
                from: 20,
                to: 40,
                color: '#b2d942',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 40,
                to: 60,
                color: '#e7cb60',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 60,
                to: 80,
                color: '#fe9041',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 80,
                to: 100,
                color: '#ff5757',
                innerRadius: '85%',
                outerRadius: '105%'
            }]
        },
        plotOptions: {
            gauge: {
                dataLabels: {
                    borderColor: 'transparent',
                },
                dial: {
                    radius: '75%',
                    backgroundColor: '#ccc',
                    borderWidth: 0,
                    baseWidth: 5,
                    topWidth: 1,
                    baseLength: '40%', // of radius
                    rearLength: '0%'
                },
                pivot: {
                    backgroundColor: '#bbb',
                    radius: 7
                }
            }
        },

        series: [{
            name: 'Speed',
            data: [89],
            tooltip: {
                valueSuffix: ' Mbps'
            },
            dataLabels: {
                enabled: true,
                useHTML: true,
                formatter: function () {
                    var mbps = this.y;
                    return '<span class="rpGaugeLabel" style="text-align:center;display:block;">' + mbps + '<span style="font-size:13px;text-align:center;display:block;">Mbps</span></span>';
                },
                style: {
                    fontFamily: 'Roboto',
                    fontWeight: '300',
                    fontSize: '22px',
                    textShadow: '0',
                    color: '#666'
                }
            }
        }]

    });
});

jsFiddle

Answer 1

我将窗格背景更改为：

pane: {
  background: null,
  ...
}

并添加了这个情节带：

plotBands: [
...
{
  from: 0,
  to: 100,
  color: '#e7f2f8', 
  innerRadius: '105%',
  outerRadius: '110%'
}]

这样可以处理边界。

移动表盘很困难。因为它将具有与标签不同的弧。也就是说，我已经通过添加仅包含表盘的第二个窗格为您做了尝试。

pane: [
...,
{
  startAngle: -100,
  endAngle: 100,
  center: ['50%', '65%'],
  background: null
}]

然后添加第二个yAxis连接到此窗格：

yAxis: [
...
{
  pane: 1,
  min: 0,
  max: 100,
  labels: {
    enabled: false
  },
  tickWidth: 0,
  tickLength: 0,
  minorTickWidth: 0,
  minorTickLength: 0,
  lineWidth:0
}]

最后指出系列使用这个yAxis：

series: [{
  yAxis: 1,
  ...
}]

完成的图表将如下所示：

＆＃13;

$(function() {
  $('#gauge-container').highcharts({
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      backgroundColor: null,
    },
    title: {
      text: null
    },
    background: null,
    credits: {
      enabled: false
    },
    pane: [{
      startAngle: -120,
      endAngle: 120,
      center: ['50%', '50%'],
      background: null,
    }, {
      startAngle: -100,
      endAngle: 100,
      center: ['50%', '65%'],
      background: null
    }],
    yAxis: [{
      min: 0,
      max: 100,
      lineColor: null,
      minorTickInterval: 'auto',
      minorTickWidth: 0,
      minorTickLength: 0,
      minorTickPosition: 'outside',
      minorTickColor: '#fff',
      tickPixelInterval: '30',
      tickWidth: 0,
      tickLength: 0,
      tickPosition: 'inside',
      tickColor: '#fff',
      labels: {
        step: 4,
        distance: -33,
        useHTML: true,
        style: {
          fontFamily: 'Roboto',
          fontWeight: '400',
          fontSize: '18px',
          textShadow: '0',
          color: '#aaaaaa'
        }
      },
      title: {
        text: null
      },
      plotBands: [{
        from: 0,
        to: 20,
        color: '#99cc01',
        innerRadius: '85%',
        outerRadius: '105%',
      }, {
        from: 20,
        to: 40,
        color: '#b2d942',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 40,
        to: 60,
        color: '#e7cb60',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 60,
        to: 80,
        color: '#fe9041',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 80,
        to: 100,
        color: '#ff5757',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 0,
        to: 100,
        color: '#e7f2f8',
        innerRadius: '105%',
        outerRadius: '110%'

      }]
    }, {
      pane: 1,
      min: 0,
      max: 100,
      labels: {
        enabled: false
      },
      tickWidth: 0,
      tickLength: 0,
      minorTickWidth: 0,
      minorTickLength: 0,
      lineWidth:0
    }],
    plotOptions: {
      gauge: {
        dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function() {
          var mbps = this.y;
          return '<span class="rpGaugeLabel" style="text-align:center;display:block;">' + mbps + '<span style="font-size:13px;text-align:center;display:block;">Mbps</span></span>';
        },
        style: {
          fontFamily: 'Roboto',
          fontWeight: '300',
          fontSize: '22px',
          textShadow: '0',
          color: '#666'
        },
          borderColor: 'transparent',
        },
        dial: {
          radius: '95%',
          backgroundColor: '#ccc',
          borderWidth: 0,
          baseWidth: 5,
          topWidth: 1,
          baseLength: '40%', // of radius
          rearLength: '0%'
        },
        pivot: {
          backgroundColor: '#bbb',
          radius: 7
        }
      }
    },
    series: [{
      yAxis: 1,
      name: 'Speed',
      data: [60],
      tooltip: {
        valueSuffix: ' Mbps'
      },
     	
    }]

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="gauge-container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

＆＃13;

小提琴示例： https://jsfiddle.net/ewolden/forhwc8h/

Highcharts {Gauge} - 删除底部边框并更改刻度盘位置

1 个答案: