график

http://c3js.org/samples/chart_donut.html

by Denis Tverdokhlebov

HTML

<script src="//cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
<script src="//cdn.rawgit.com/pubnub/eon/master/lib/eon.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/pubnub/eon/master/lib/eon.css">
<link rel="stylesheet" href="https://rawgit.com/c3js/c3/master/c3.min.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/c3js/c3/master/c3.min.js"></script>
<div class="container">
  <div class="chart">
    <div id="chart"></div>
  </div>
</div>

CSS

.legend div {
  width: 100%;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  color: white;
}

text.c3-chart-arcs-title {
  font-size: 22px;
  font-weight: 600;
  opacity: 0.8 !important;
}

JavaScript

var datain = [
  ['Поле 1', 5],
  ['Поле 2', 25],
  ['Поле 3', 40],
  ['Поле 4', 30]
];

var chart = c3.generate({
  data: {
    columns: datain,
    type: 'donut',
    onmouseover: function(d) {
      d3.select('.c3-chart-arcs-title').text(d.value + '%');
    }
  },
  tooltip: {
    show: false, // отключаем меню при наведении на столбцы
  },
  donut: {
    label: {
      show: false //отключаем вывод процентов на самих столбцах
    },
    title: ''
  },
  legend: {
    show: false,
    item: {
      onmouseover: function(id) {
        chart.focus(id);
      }
    },
    position: 'right'
  }
});

function toggle(id) {
  chart.toggle(id);
}

d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
  .data(['Поле 1', 'Поле 2', 'Поле 3', 'Поле 4'])
  .enter().append('div')
  .attr('data-id', function(id) {
    return id;
  })
  .html(function(id) {
    return id;
  })
  .each(function(id) {
    d3.select(this).style('background-color', chart.color(id));
  })
  .on('mouseover', function(id) {
    chart.focus(id);
  })
  .on('mouseout', function(id) {
    chart.revert();
  })
  .on('click', function(id) {
    chart.toggle(id);
  });