influence/components/home/trend/headerChart.vue

<template>
  <div>
    <Bar
      :options="chartOptions"
      :data="myData"
    />
  </div>
</template>

<script setup>

  import { Bar } from "vue-chartjs"
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    ArcElement,
    LinearScale,
    Filler,
  } from "chart.js"

  ChartJS.register(
    Title,
    Tooltip,
    Legend,
    BarElement,
    LineController,
    LineElement,
    PointElement,
    CategoryScale,
    ArcElement,
    LinearScale,
    Filler
  )
  // props
  const props = defineProps({
    height: {
      type: Number,
      //default: 250,
    },
    objChartData: {
      type: Object,
      default: function () {
        return {}
      }
    },
  })

  // 차트 높이 유동 계산
  //const h = ref((document.querySelector("body").clientWidth / 100) * (470 / 19.2))
  const clientW = ref((document.querySelector("body").clientWidth))

  const chartData = ref({
    labels: [],
    datasets: [
      {
        label: "CUR",
        borderWidth : 1,
        pointBackgroundColor:'#FF531E',
        borderColor:'#FF531E',
        //lineTension : 0.5,
        pointRadius : 6,
        hoverRadius : 8,
        //borderDash : [4,6],
        pointStyle : "circle",
        data: [
          5,9,9,10,7,
          5,9,9,10,7,
          5,9,9,10,7,
          5,9,9,10,7,
          5,9,9,10,7,
        ],
        type: "line",
        fill : false,
      },
      {
        label: "AVG",
        borderWidth : 1,
        pointBackgroundColor:'#44C5FF',
        borderColor:'#44C5FF',
        //lineTension : 0.5,
        pointRadius : 6,
        hoverRadius : 8,
        //borderDash : [4,6],
        pointStyle : "circle",
        data: [
          10,10,12,11,10,
          10,10,12,11,10,
          10,10,12,11,10,
          10,10,12,11,10,
          10,10,12,11,10,
        ],
        type: "line",
        fill : false,
      },
      {
        label: "PEAK",
        borderWidth : 1,
        pointBackgroundColor : '#E1473D',
        borderColor:'#E1473D',
        //lineTension : 0.5,
        pointRadius : 6,
        hoverRadius : 8,
        //borderDash : [4,6],
        pointStyle : "circle",
        data: [
          10,10,11,10,12,
          10,10,11,10,12,
          10,10,11,10,12,
          10,10,11,10,12,
          10,10,11,10,12,
        ],
        type: "line",
        fill : false,
      },
    ],
  })

  const chartOptions = ref({
    layout: {
      padding: {
        top: 0,
      },
    },
    responsive: true,
    maintainAspectRatio: false,
    duration: 1000,
    plugins: {
      legend: {
        display: false,
        labels: {
          paddingLeft: 15,
          boxHeight: 12,
          boxWidth: 12,
          usePointStyle : true, 
          pointStyle : 'line',
          font: {
            size: 14,
            color: "#646B74",
            weight: "400",
          },
        },
        position: "top",
        align: "center",
      },
      datalabels: {
        display: false,
      },
      tooltip: {
        interaction: {
          //intersect: false,
          //mode: "index",
        },
        displayColors : false,
        callbacks: {
          title : function(tooltipItem, data){
            return tooltipItem[0].label.substr(0,10) + " " + tooltipItem[0].label.substr(11)
            // tooltipItem[0].parsed.x
          },
          label: function(tooltipItem, data) {
					  //return tooltipItem.dataset.label
            // tooltipItem.formattedValue
            // tooltipItem.datasetIndex
				  },
          titleFont: { // 타이틀 영역 폰트 스타일
            size: 10,
            weight:500,
            family:'Inter',
          },
          titleColor : '#f00', // 타이틀 영역 폰트 컬러
          titleAlign : 'right', // 타이틀 영역 align (left, center, right)
          titleMarginBottom : 3,
        },
      },
    },
    scales: {
      x: {
        beginAtZero: true,
        stacked: true,
        title: {
          text: "",
          align: "end",
          display: false,
          font: {
            color: "#666",
            size: 12,
            weight: "500",
          },
        },
        grid: {
          display: false,
          drawTicks: false,
          drawBorder: false,
          color: "transparent",
        },
        ticks: {
          padding: 20,
          font: {
            size: function(context){
              let clientW = document.querySelector("body").clientWidth;
              if(clientW <= 1930){
                return 11
              }else if(clientW >= 2550 && clientW < 3840){
                return 17
              }else if(clientW >= 3840){
                return 22
              }
            },
            weight: "400",
          },
          color: "#838FAC",
          align:'center',
        },
      },
      y: {
        border: {
          display: false,
        },
        beginAtZero: true,
        stacked: false,
        title: {
          display: false,
          text: "",
        },
        ticks: {
          display: true,
          padding: 10,
          font: {
            size: function(context){
              let clientW = document.querySelector("body").clientWidth;
              if(clientW <= 1930){
                return 11
              }else if(clientW >= 2550 && clientW < 3840){
                return 17
              }else if(clientW >= 3840){
                return 22
              }
            },
            weight: "400",
          },
          color: "#b1b1b1",
        },
        min:0
      },
    },
    animation: {
      duration: 0,
    },
  })
  
  let myData = computed(()=>{
    // 차트데이터 속성 반응형으로 복사한 후 값 설정
    let tempData = ref(_cloneDeep(chartData.value))

    tempData.value.labels = props.objChartData.labels
    tempData.value.datasets[0].data = props.objChartData.data[0]
    tempData.value.datasets[1].data = props.objChartData.data[1]
    tempData.value.datasets[2].data = props.objChartData.data[2]
    //tempData.value.datasets[0].data = props.objChartData.data1
    //tempData.value.datasets[1].data = props.objChartData.data2
    
    return tempData.value
  })
</script>