<h2>ドーナツ型サンプル</h2>
<div class="card--chart">
    <div class="js-donut-chart-container donut-chart-container" style="height:450px; width:450px;"></div>
    <div class="js-legend-chart-container legend-chart-container"></div>
let donutData = {
  data: [
  { name: "ホッケ", id: 1, quantity: 86 },
  { name: "アジ", id: 2, quantity: 300 },
  { name: "紅鮭", id: 3, quantity: 276 },
  { name: "サバ", id: 4, quantity: 195 },
  { name: "シシャモ", id: 5, quantity: 36 },
  { name: "タイ", id: 0, quantity: 814 }] };



function createDonutChart() {
  let donutChart = britecharts.donut(),
  donutContainer = d3.select('.js-donut-chart-container'),
  containerWidth = donutContainer.node() ? donutContainer.node().getBoundingClientRect().width : false,
  legendChart = britecharts.legend(),
  legendContainer;

  donutChart.
  isAnimated(true).
  highlightSliceById(2).
  width(300).
  height(300).
 
  on('customMouseOver', function (data) {
    legendChart.highlight(data.data.id);
  }).
  on('customMouseOut', function () {
    legendChart.clearHighlight();
  });

  legendChart.
  width(300).
  height(200).
  numberFormat('s');

  donutContainer.datum(donutData.data).call(donutChart);
  legendContainer = d3.select('.js-legend-chart-container');
  legendContainer.datum(donutData.data).call(legendChart);

}

createDonutChart();

External CSS

  1. https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js
  2. https://cdn.jsdelivr.net/npm/britecharts@2/dist/bundled/britecharts.min.js