Multi Series Pie

Multi Series Pie - 图1

config setup

1. const config = {
2. type: 'pie',
3. data: data,
4. options: {
5. responsive: true,
6. plugins: {
7. legend: {
8. labels: {
9. generateLabels: function(chart) {
10. // Get the default label list
11. const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
12. const labelsOriginal = original.call(this, chart);

14. // Build an array of colors used in the datasets of the chart
15. let datasetColors = chart.data.datasets.map(function(e) {
16. return e.backgroundColor;
17. });
18. datasetColors = datasetColors.flat();

20. // Modify the color and hide state of each label
21. labelsOriginal.forEach(label => {
22. // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
23. label.datasetIndex = (label.index - label.index % 2) / 2;

25. // The hidden state must match the dataset's hidden state
26. label.hidden = !chart.isDatasetVisible(label.datasetIndex);

28. // Change the color to match the dataset
29. label.fillStyle = datasetColors[label.index];
30. });

32. return labelsOriginal;
33. }
34. },
35. onClick: function(mouseEvent, legendItem, legend) {
36. // toggle the visibility of the dataset from what it currently is
37. legend.chart.getDatasetMeta(
38. legendItem.datasetIndex
39. ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
40. legend.chart.update();
41. }
42. },
43. tooltip: {
44. callbacks: {
45. label: function(context) {
46. const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
47. return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
48. }
49. }
50. }
51. }
52. },
53. };

1. const DATA_COUNT = 5;
2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};

4. const labels = Utils.months({count: 7});
5. const data = {
6. labels: ['Overall Yay', 'Overall Nay', 'Group A Yay', 'Group A Nay', 'Group B Yay', 'Group B Nay', 'Group C Yay', 'Group C Nay'],
7. datasets: [
8. {
9. backgroundColor: ['#AAA', '#777'],
10. data: [21, 79]
11. },
12. {
13. backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
14. data: [33, 67]
15. },
16. {
17. backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
18. data: [20, 80]
19. },
20. {
21. backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
22. data: [10, 90]
23. }
24. ]
25. };

Docs