Radar Chart

Radar Chart - 图1

Randomize

options data setup

  1. function getLineColor(ctx) {
  2.   return Utils.color(ctx.datasetIndex);
  3. }
  5. function alternatePointStyles(ctx) {
  6.   const index = ctx.dataIndex;
  7.   return index % 2 === 0 ? 'circle' : 'rect';
  8. }
  10. function makeHalfAsOpaque(ctx) {
  11.   return Utils.transparentize(getLineColor(ctx));
  12. }
  14. function make20PercentOpaque(ctx) {
  15.   return Utils.transparentize(getLineColor(ctx), 0.8);
  16. }
  18. function adjustRadiusBasedOnData(ctx) {
  19.   const v = ctx.parsed.y;
  20.   return v < 10 ? 5
  21.     : v < 25 ? 7
  22.     : v < 50 ? 9
  23.     : v < 75 ? 11
  24.     : 15;
  25. }
  27. const config = {
  28.   type: 'radar',
  29.   data: data,
  30.   options: {
  31.     plugins: {
  32.       legend: false,
  33.       tooltip: false,
  34.     },
  35.     elements: {
  36.       line: {
  37.         backgroundColor: make20PercentOpaque,
  38.         borderColor: getLineColor,
  39.       },
  40.       point: {
  41.         backgroundColor: getLineColor,
  42.         hoverBackgroundColor: makeHalfAsOpaque,
  43.         radius: adjustRadiusBasedOnData,
  44.         pointStyle: alternatePointStyles,
  45.         hoverRadius: 15,
  46.       }
  47.     }
  48.   }
  49. };
  1. function generateData() {
  2.   return Utils.numbers({
  3.     count: DATA_COUNT,
  4.     min: 0,
  5.     max: 100
  6.   });
  7. }
  9. const data = {
  10.   labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
  11.   datasets: [{
  12.     data: generateData()
  13.   }]
  14. };
  1. const DATA_COUNT = 7;
  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. ];

Docs