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();