-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart2.js
50 lines (48 loc) · 1.89 KB
/
chart2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('doughnut');
fetch('./data/mechine.json')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
const uniqueData = _.uniqBy(data, 'Category');
const categories = uniqueData.map((item) => item.Category);
const RCoils = uniqueData.map((item) => item.RCoil);
new Chart(ctx, {
type: 'doughnut',
data: {
labels: categories,
datasets: [{
label: 'order per Category',
data: RCoils,
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
datalabels: {
color: '#fff',
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (datasets.indexOf(ctx.dataset) === datasets.length - 1) {
let sum = datasets[0].data.reduce((a, b) => a + b, 0);
let percentage = Math.round((value / sum) * 100) + '%';
return percentage;
} else {
return '';
}
}
}
}
},
plugins: [ChartDataLabels]
});
})
.catch((error) => {
console.error('Error fetching or parsing data:', error);
});
});