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

Docs