Pie Chart

Pie Chart - 图1

RandomizeToggle Doughnut View

options data setup

  1. function colorize(opaque, hover, ctx) {
  2.   const v = ctx.parsed;
  3.   const c = v < -50 ? '#D60000'
  4.     : v < 0 ? '#F46300'
  5.     : v < 50 ? '#0358B6'
  6.     : '#44DE28';
  8.   const opacity = hover ? 1 - Math.abs(v / 150) - 0.2 : 1 - Math.abs(v / 150);
  10.   return opaque ? c : Utils.transparentize(c, opacity);
  11. }
  13. function hoverColorize(ctx) {
  14.   return colorize(false, true, ctx);
  15. }
  17. const config = {
  18.   type: 'pie',
  19.   data: data,
  20.   options: {
  21.     plugins: {
  22.       legend: false,
  23.       tooltip: false,
  24.     },
  25.     elements: {
  26.       arc: {
  27.         backgroundColor: colorize.bind(null, false, false),
  28.         hoverBackgroundColor: hoverColorize
  29.       }
  30.     }
  31.   }
  32. };
  1. function generateData() {
  2.   return Utils.numbers({
  3.     count: DATA_COUNT,
  4.     min: -100,
  5.     max: 100
  6.   });
  7. }
  9. const data = {
  10.   datasets: [{
  11.     data: generateData()
  12.   }]
  13. };
  1. const DATA_COUNT = 5;
  2. Utils.srand(110);
  4. const actions = [
  5.   {
  6.     name: 'Randomize',
  7.     handler(chart) {
  8.       chart.data.datasets.forEach(dataset => {
  9.         dataset.data = generateData();
  10.       });
  11.       chart.update();
  12.     }
  13.   },
  14.   {
  15.     name: 'Toggle Doughnut View',
  16.     handler(chart) {
  17.       if (chart.options.cutout) {
  18.         chart.options.cutout = 0;
  19.       } else {
  20.         chart.options.cutout = '50%';
  21.       }
  22.       chart.update();
  23.     }
  24.   }
  25. ];

Docs