Radar skip points

Radar skip points - 图1

Randomize

config setup actions

  1. const config = {
  2. type: 'radar',
  3. data: data,
  4. options: {
  5. responsive: true,
  6. plugins: {
  7. title: {
  8. display: true,
  9. text: 'Chart.js Radar Skip Points Chart'
  10. }
  11. }
  12. },
  13. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
  3. const labels = Utils.months({count: 7});
  4. const dataFirstSkip = Utils.numbers(NUMBER_CFG);
  5. const dataMiddleSkip = Utils.numbers(NUMBER_CFG);
  6. const dataLastSkip = Utils.numbers(NUMBER_CFG);
  7. dataFirstSkip[0] = null;
  8. dataMiddleSkip[Number.parseInt(dataMiddleSkip.length / 2, 10)] = null;
  9. dataLastSkip[dataLastSkip.length - 1] = null;
  10. const data = {
  11. labels: labels,
  12. datasets: [
  13. {
  14. label: 'Skip first dataset',
  15. data: dataFirstSkip,
  16. borderColor: Utils.CHART_COLORS.red,
  17. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  18. },
  19. {
  20. label: 'Skip mid dataset',
  21. data: dataMiddleSkip,
  22. borderColor: Utils.CHART_COLORS.blue,
  23. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  24. },
  25. {
  26. label: 'Skip last dataset',
  27. data: dataLastSkip,
  28. borderColor: Utils.CHART_COLORS.green,
  29. backgroundColor: Utils.transparentize(Utils.CHART_COLORS.green, 0.5),
  30. }
  31. ]
  32. };
  1. const actions = [
  2. {
  3. name: 'Randomize',
  4. handler(chart) {
  5. chart.data.datasets.forEach((dataset, i) => {
  6. const data = Utils.numbers({count: chart.data.labels.length, min: 0, max: 100});
  7. if (i === 0) {
  8. data[0] = null;
  9. } else if (i === 1) {
  10. data[Number.parseInt(data.length / 2, 10)] = null;
  11. } else {
  12. data[data.length - 1] = null;
  13. }
  14. dataset.data = data;
  15. });
  16. chart.update();
  17. }
  18. }
  19. ];