Полукруглая кольцевая диаграмма в highchart с метками данных в углах

Как создать кольцевую полукруглую диаграмму с помощью highchart, которая обеспечивает следующие результаты: ожидаемый результат диаграммы

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    title: {
      text: '3000',
      align: 'center',
      verticalAlign: 'middle',
      style: {
        fontSize: '50px'
      },
      y: 70
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '75%']
      }
    },
    series: [{
      type: 'pie',
      name: '3000',
      innerSize: '65%',
      data: [{
        y: 3000,
        name: '0',
        color: '#00B8AA',
        dataLabels: {
          x: 1,
          y: 90,
        }
      }, {
        y: 6000,
        name: '6000',
        color: '#E9E9E9',
        dataLabels: {
          x: 0,
          y: 34
        }
      }]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

Я делаю пример, но не показываю значение в углах, как показано на следующем изображении: Результат примера с использованием highchart


highcharts donut-chart
person Carlos Osiel    schedule 07.07.2016    source источник
comment
Вероятно, вы ищете датчики Highcharts, а не круговые диаграммы: highcharts.com/demo/gauge-solid< /а>   -  person Kabulan0lak    schedule 08.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Если вам нужно использовать круговые диаграммы, вы можете выполнить простое форматирование данных для достижения своей цели. Вы можете добавить два фрагмента с y: 0, в начале и в конце вашей серии круговых диаграмм.

 data: [{
    y: 0,
    name: '0',
    dataLabels: {
      enabled: true,
    }
  }, {
    y: 3000,
    color: '#00B8AA',
  }, {
    y: 3000,
    color: '#ddd',
  }, {
    y: 0,
    name: '6000',
    dataLabels: {
      enabled: true,
    }
  }]

Пример того, как это может работать: http://jsfiddle.net/zodc87jx/1/

Другой вариант — использовать диаграмму типа Solidgauge, это даст вам возможность использовать только одно значение без добавления каких-либо «пустых» данных в вашу серию.

Здесь вы можете увидеть пример того, как это может работать: http://jsfiddle.net/g65vLnyr/

С наилучшими пожеланиями,

person Grzegorz Blachliński    schedule 08.07.2016