Chart.js #6281 test02

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/gh/nagix/nagix.github.io@e2703418620d7867cab8fbcf9803c7f1f9d29158/Chart.6281.js"></script>
<canvas id="start" width=150 height=200></canvas>
<canvas id="end" width=150 height=200></canvas>
<canvas id="origin" width=150 height=200></canvas>
<canvas id="start-open" width=150 height=200></canvas>
<canvas id="end-open" width=150 height=200></canvas>
<canvas id="origin-open" width=150 height=200></canvas>
<canvas id="start-circular" width=150 height=200></canvas>
<canvas id="end-circular" width=150 height=200></canvas>
<canvas id="origin-circular" width=150 height=200></canvas>
<canvas id="start-open-circular" width=150 height=200></canvas>
<canvas id="end-open-circular" width=150 height=200></canvas>
<canvas id="origin-open-circular" width=150 height=200></canvas>

CSS

canvas {
  float: left;
}

JavaScript

function draw(opts) {
  new Chart(document.getElementById(opts.fill + (opts.open ? '-open': '') + (opts.circular ? '-circular': '')), {
    type: 'radar',
    data: {
      labels: [1,2,3,4,5],
      datasets: [{
        data: [1,1,opts.open?NaN:1,1,1],
        fill: opts.fill
      }],
    },
    options: {
      responsive: false,
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'fill: \'' + opts.fill + '\''
      },
      scale: {
        ticks: {
          min: -1,
          max: 2
        },
        pointLabels: {
          display: false
        },
        gridLines: {
          circular: opts.circular
        }
      }
    }
  });
}

draw({fill: 'start', open: false, circular: false});
draw({fill: 'end', open: false, circular: false});
draw({fill: 'origin', open: false, circular: false});
draw({fill: 'start', open: true, circular: false});
draw({fill: 'end', open: true, circular: false});
draw({fill: 'origin', open: true, circular: false});
draw({fill: 'start', open: false, circular: true});
draw({fill: 'end', open: false, circular: true});
draw({fill: 'origin', open: false, circular: true});
draw({fill: 'start', open: true, circular: true});
draw({fill: 'end', open: true, circular: true});
draw({fill: 'origin', open: true, circular: true});