Radar Chart Stacked

Radar Chart Stacked - 图1

RandomizePropagateSmooth

config setup actions

  1. const config = {
  2.   type: 'radar',
  3.   data: data,
  4.   options: {
  5.     plugins: {
  6.       filler: {
  7.         propagate: false
  8.       },
  9.       'samples-filler-analyser': {
  10.         target: 'chart-analyser'
  11.       }
  12.     },
  13.     interaction: {
  14.       intersect: false
  15.     }
  16.   }
  17. };
  1. const inputs = {
  2.   min: 8,
  3.   max: 16,
  4.   count: 8,
  5.   decimals: 2,
  6.   continuity: 1
  7. };
  9. const generateLabels = () => {
  10.   return Utils.months({count: inputs.count});
  11. };
  13. const generateData = () => {
  14.   const values = Utils.numbers(inputs);
  15.   inputs.from = values;
  16.   return values;
  17. };
  19. const labels = Utils.months({count: 8});
  20. const data = {
  21.   labels: generateLabels(),
  22.   datasets: [
  23.     {
  24.       label: 'D0',
  25.       data: generateData(),
  26.       borderColor: Utils.CHART_COLORS.red,
  27.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red),
  28.     },
  29.     {
  30.       label: 'D1',
  31.       data: generateData(),
  32.       borderColor: Utils.CHART_COLORS.orange,
  33.       hidden: true,
  34.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.orange),
  35.       fill: '-1'
  36.     },
  37.     {
  38.       label: 'D2',
  39.       data: generateData(),
  40.       borderColor: Utils.CHART_COLORS.yellow,
  41.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.yellow),
  42.       fill: 1
  43.     },
  44.     {
  45.       label: 'D3',
  46.       data: generateData(),
  47.       borderColor: Utils.CHART_COLORS.green,
  48.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green),
  49.       fill: false
  50.     },
  51.     {
  52.       label: 'D4',
  53.       data: generateData(),
  54.       borderColor: Utils.CHART_COLORS.blue,
  55.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue),
  56.       fill: '-1'
  57.     },
  58.     {
  59.       label: 'D5',
  60.       data: generateData(),
  61.       borderColor: Utils.CHART_COLORS.purple,
  62.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.purple),
  63.       fill: '-1'
  64.     },
  65.     {
  66.       label: 'D6',
  67.       data: generateData(),
  68.       borderColor: Utils.CHART_COLORS.grey,
  69.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.grey),
  70.       fill: {value: 85}
  71.     }
  72.   ]
  73. };
  1. let smooth = false;
  2. let propagate = false;
  4. const actions = [
  5.   {
  6.     name: 'Randomize',
  7.     handler(chart) {
  8.       inputs.from = [];
  9.       chart.data.datasets.forEach(dataset => {
  10.         dataset.data = generateData();
  11.       });
  12.       chart.update();
  13.     }
  14.   },
  15.   {
  16.     name: 'Propagate',
  17.     handler(chart) {
  18.       propagate = !propagate;
  19.       chart.options.plugins.filler.propagate = propagate;
  20.       chart.update();
  22.     }
  23.   },
  24.   {
  25.     name: 'Smooth',
  26.     handler(chart) {
  27.       smooth = !smooth;
  28.       chart.options.elements.line.tension = smooth ? 0.4 : 0;
  29.       chart.update();
  30.     }
  31.   }
  32. ];
DatasetFillTarget (visibility)
0undefinedboundary “start”
1“-1”(hidden)
21dataset 1
3falsenone
4“-1”dataset 3
5“-1”dataset 4
6{“value”:85}boundary “[object Object]”

Docs