반응형

vue-chartjs와 chart.js를 이용하여 라인차트를 그려보겠습니다.

(vue 2 버전, chart.js: 3.5.0, vue-chartjs: 3.5.1 버전 사용)

 


 

1. vue-chartjs, chart.js 다운로드

npm install chart.js
npm install vue-chartjs chart.js --save

 

 

2. 라인차트 개발 문서(3.5.0 version)

https://www.chartjs.org/docs/3.5.0/charts/line.html

 

Line Chart | Chart.js

Line Chart A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. const config = { type: 'line', data: data, };const config = { type: 'line', data: data, }; const labels = Utils.mo

www.chartjs.org

 

3. 라인차트 구현

 

3-1. global.js

import { Chart, registerables } from "chart.js";

Chart.register(...registerables);

- 여러 차트와 공유할 수 있는 파일을 global.js로 만들었습니다.

 

 

3-2. lineChart.js

import "@/utils/charts/global";
import { Line } from "~/vue-chartjs-3.5.1/src/index";

export default {
  extends: Line,
  props: ["chartData", "options"],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
};

- 저는 vue-chartjs를 외부 파일로 넣어서 사용했습니다.

- vue 파일에서 설정한 데이터와 옵션을 가지고 차트를 그리는 코드입니다.

 

 

3-3. LineChart.vue

<template>
  <div>
    <line-chart
      ref="lineChart"
      :chartData="chart.data"
      :options="chart.options"
      id="chart"
    ></line-chart>
  </div>
</template>
import LineChart from "~/lineChart.js";

export default {
  name: "line-chart",
  type: "line",
  components: {
    LineChart
  },
  data() {
    return {
      chart: {
        data: {
          labels: [2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],
          datasets: [
            {
              label: "인원수",
              backgroundColor: "rgb(255,153,204, 0.5)",
              pointBackgroundColor: "hotpink",
              fill: true,
              tension: 0.1,
              borderColor: "hotpink",
              pointBorderColor: "hotpink",
              borderWidth: 1,
              pointBorderWidth: 1,
              data: [450, 300, 100, 1000, 750, 600, 900, 1500, 1200, 2000]
            }
          ]
        },
        options: {
          plugins: {
            legend: {
              display: true,
              position: "left",
              labels: {
                boxWidth: 8,
                padding: 10,
                usePointStyle: true,
                pointStyle: "circle",
                font: {
                  size: 14
                }
              },
              fullSize: true,
              align: "center"
            },
            tooltip: {
              boxWidth: 15,
              bodyFont: {
                size: 14
              }
            }
          },
          scales: {
            x: {
                grid: {
                  display: false
                },
                ticks: {
                  padding: 3
                }
            },
            y: {
              ticks: {
                callback: (val, index) => {
                  return val !== 0 ? val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "";
                },
                padding: 10
              },
              grid: {
                drawBorder: false,
                color: "#323232",
                lineWidth: 1
              }
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          animation: {
            duration: 5000
          }
        }
      }
    };
  }

 

- 위 코드의 옵션들에 대한 설명은 2번 링크를 이용하면 볼 수 있습니다.

- 보여지는 데이터는 왼쪽에서 오른쪽 순서로 보여집니다.

 

 

4. 결과 화면

 

라인차트 예제

 

 

 

이상으로 뷰에서 Chart.js를 사용하여 라인차트를 그려보았습니다.


반응형