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.             var 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. };