Chart.js #6214

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div className="RadarChartDemo2">
  <canvas id="myChart1"></canvas>
</div>

CSS

body {
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}

.RadarChartDemo2 {
  margin: 100px;
  width: 200px;
  height: 200px;
  padding: 0;
  box-sizing: content-box;
}

.RadarChartDemo2 canvas {
  background-color: 'gray';
  background-image: url('../../assets/images/charts/radar_base.svg');
  background-size: 100%;
  background-repeat: no-repeat;
}

JavaScript

var ctx1 = document.getElementById("myChart1");
var myChart1 = new Chart(ctx1, {
  type: 'radar',
  data: {
    labels: ['項目1', '項目2', '項目3', '項目4', '項目5', '項目6', '項目7', '項目8'],
    datasets: [{
      // label: 'Literacy',
      backgroundColor: 'rgba(228,164,89,0.2)',
      borderColor: 'rgba(228,164,89,0.8)',
      borderWidth: 1.5,
      pointBackgroundColor: 'rgba(228,164,89,0.5)',
      pointBorderColor: 'rgba(228,164,89,1)',
      pointBorderWidth: 3,
      pointHoverBackgroundColor: 'rgba(228,164,89,0.5)',
      pointHoverBorderColor: 'rgba(228,164,89,1)',
      data: [2, 3, 4, 1, 2, 3, 4, 5],
    }]
  },
  options: {
    maintainAspectRatio: false,
    aspectRatio: 1.5,
    layout: { padding: 0 },
    scale: {
      pointLabels: {
        fontFamily: "Song",
        fontSize: 0,
        fontColor: 'rgba(139,141,158,1)',
      },
      ticks: {
        min: 0,
        max: 5,
        stepSize: 1,
        display: false,
      },
      gridLines: {
        color: 'rgba(255,0,0,0.9)',
        lineWidth: 1.5,
      },
      angleLines: {
        color: 'rgba(255,0,0,0.9)',
        lineWidth: 1.5,
      },
    },
    legend: {
      display: false,
    },
    tooltips: {
      backgroundColor: 'rgba(204, 204, 204, 0.9)',
      titleFontColor: 'rgba(59, 59, 59, 1)',
      bodyFontColor: 'rgba(59, 59, 59, 1)',
      yPadding: 10,
      xPadding: 10,
    }
  }
});