Как поставить прогресс в процентах в солидарности старших - PullRequest
0 голосов
/ 21 мая 2019

У меня есть сплошная шкала Highcharts.Который используется для описания прогресса в круговой диаграмме.Здесь мой прогресс составляет 50% согласно данным.Здесь мне просто нужно добавить этот прогресс внутри диаграммы / круга в процентах.Может кто-нибудь, пожалуйста, помогите мне с этим.Ниже мой HTML и код JavaScript:

Highcharts.chart('my-chart', {

  'chart': {
    'type': 'solidgauge'
  },

  'title': null,

  'tooltip': {
    'enabled': false
  },

  'pane': {
    'center': ['50%', '50%'],
    'size': '300px',
    'startAngle': 0,
    'endAngle': 360,
    'background': {
      'backgroundColor': '#EEE',
      'innerRadius': '90%',
      'outerRadius': '100%',
      'borderWidth': 0
    }
  },

  'yAxis': {
    'min': 0,
    'max': 100,
    'labels': {
      'enabled': false
    },

    'lineWidth': 0,
    'minorTickInterval': null,
    'tickPixelInterval': 400,
    'tickWidth': 0
  },

  'plotOptions': {
    'solidgauge': {
      'innerRadius': '90%'
    }
  },

  'series': [{
    'name': 'Speed',
    'data': [50],
    'dataLabels': {
      'enabled': false
    }
  }]

});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 600px; margin: 0 auto">
  <div id="my-chart" style="width: 600px; height: 600px; float: left"></div>
</div>

1 Ответ

0 голосов
/ 22 мая 2019

Если я вас правильно понял, вы можете сделать это, используя dataLabels.formatter.Проверьте демо и код, указанный ниже.

Код:

  series: [{
    name: 'Speed',
    data: [50],
    dataLabels: {
      enabled: true,
      borderWidth: 0,
      style: {
        fontSize: '40px'
      },
      verticalAlign: 'middle',
      formatter: function() {
        return this.y + '%'
      }
    }
  }]

Демо:

Справочник по API:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...