반응형

chartjs로 간단한 레이더 도형 그려보기

먼저 https://jsfiddle.net

 

Create a new fiddle - JSFiddle

 

jsfiddle.net

를 통해 html을 시작해봅니다.

리소스에서 https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js를 추가해 줍니다.

이후 HTML 칸에는 

<html>
<head>

</head>
<body>
<canvas id="marksChart" width="600" height="500"></canvas>
</body>
</html>

javascript 칸에는 아래와 같이 넣어줍니다. 

var marksCanvas = document.getElementById("marksChart");

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;

var marksData = {
  labels: ["행복", "HR제도", "사무환경", "윤리경영", "업무"],
  datasets: [{
    label: "전사",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [3, 4, 3.3, 3, 3]
  }, {
    label: "우리조직",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [3.3, 3, 2.2, 3, 4]
  }]
};

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 5,
      stepSize: 1
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

var radarChart = new Chart(marksCanvas, {
  type: 'radar',
  data: marksData,
  options: chartOptions
});

 그러면 최종으로 레이더 도형이 그려짐을 알 수 있습니다.

생각보다 개발하는건 쉽지가 않네요 ㅠ

반응형

prev article thumbnail image
이전 글 추천
[xcloud] Project X cloud 이용기
2019.10.24
next article thumbnail image
다음 글 추천
[닌텐도] 링피트 어드벤처
2019.10.30
복사했습니다!