Question

我需要将它设计成如下样式：

这是我得到的最接近的。我遇到的麻烦就是实现那种灰色背景。我尝试用CSS做，但是由highcharts生成的html对我来说非常困难。

$(function() {

  var gaugeOptions = {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '95%'],
      size: '190%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: '#ddd',
        outerRadius: '100%',
        innerRadius: '90%',
        shape: 'arc',
        borderColor: 'transparent',
      }
    },

    tooltip: {
      enabled: false
    },

    title: {
      style: {
          color: '#666',
          fontSize: '16px',
          fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
      }
    },

    // the value axis
    yAxis: {
      stops: [
        [0.1, '#c62026'], // red
        [0.25, '#e77525'], // orange
        [0.75, '#70be44'] // green
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickPixelInterval: 0,
      tickWidth: 0,
      title: {
        y: -50
      },
      labels: {
        y: 16
      }
    },

    plotOptions: {
      solidgauge: {
        innerRadius: '90%',
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        },
      }
    },

    credits: {
      enabled: false
    },
  };

  // ON TARGET
  $('#ex-gauge').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 100
    },

    title: {
      text: 'Title',
    },

    series: [{
      name: 'customers',
      data: [63.7],
      dataLabels: {
        format: '<div style="text-align:center;"><span style="font-size:14px;' +
          'black' + '">{y}%</span>'
      }
    }]

  }));
});

Answer 1

我添加了＆＃34; prc＆＃34; class为div并创建了新的css规则。

Fiddle demo

CSS

.prc {
  position: relative;
  top: 0px;
  width: 70px;
  height: 35px;
  background-color: #ddd;
  border-radius: 70px 70px 0 0;
}
.prc span {
  position: relative;
  top: 12px;
}

脚本

   series: [{
      name: 'customers',
      data: [63.7],
      dataLabels: {
        format: '<div class="prc" style="text-align:center;"><span style="font-size:14px;' +
          'black' + '">{y}%</span>'
      }
    }]

如何设置我的highcharts solid gauge，以获得百分比背后的背景？

1 个答案: