HANYANG_REACT/www/kadm/visit/_backup/visit_chart.php

<?php
$cate_area = "admin";
if( !$cate_area ) return;

include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _ADM_INC_PATH_ ."/auth_check.php";

$vsobj = new Visit();
$today     = $_REQUEST['sdate'] ?: date("Y-m-d");

switch( 1 ){

}

$totime = strtotime($today);
$yestime = strtotime($today."-1 days");
$nexttime = strtotime($today."+1 days");

$logdata['today']     = $vsobj->getVisitData("hour", "LOG", $cate_area, date("Y-m-d 00:00:00",$totime), date("Y-m-d 23:59:59",$totime));
$logdata['yesterday'] = $vsobj->getVisitData("hour", "LOG", $cate_area, date("Y-m-d 00:00:00",$yestime), date("Y-m-d 23:59:59",$yestime));
$logdata['nextday']   = $vsobj->getVisitData("hour", "LOG", $cate_area, date("Y-m-d 00:00:00",$nexttime), date("Y-m-d 23:59:59",$nexttime));

$sessdata['today']     = $vsobj->getVisitData("hour", "SESS", $cate_area, date("Y-m-d 00:00:00",$totime), date("Y-m-d 23:59:59",$totime));
$sessdata['yesterday'] = $vsobj->getVisitData("hour", "SESS", $cate_area, date("Y-m-d 00:00:00",$yestime), date("Y-m-d 23:59:59",$yestime));
$sessdata['nextday']   = $vsobj->getVisitData("hour", "SESS", $cate_area, date("Y-m-d 00:00:00",$nexttime), date("Y-m-d 23:59:59",$nexttime));

include _ADM_INC_PATH_ ."/header.html";
?>

        <form method="get" name="sform" id="sform" class="sform form-inline" action="<?=$_SERVER['PHP_SELF']?>">
          <label> <span> 날짜 :</span>
            <input type="date" max="9999-12-31" name="sdate" class="dpicker form-control form-control-sm" value="<?=$_REQUEST['sdate']?>">
          </label>
        </form>

        <div id="cmd_bar" class="mb-2">
          <div class="h4"><i class="bi bi-files-alt"></i> <?=$cate_title?> 방문 통계</div>
          <div class="text-right">
          </div>
        </div>

        <div class="container-fluid mt-3 cont_hfix">
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 페이지뷰 통계</span>
              </h5>
              <canvas id="day_chart_pageview" style="width:1000px; height: 200px;"></canvas>
              <div id="day_c_1" style="width:100%; height:300px;"></div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 방문 통계</span>
              </h5>
              <canvas id="day_chart_sess" style="width:1000px; height: 200px;"></canvas>
            </div>
          </div>
        </div>
<?php

include _ADM_INC_PATH_ ."/footer.html";
?>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0/dist/apexcharts.min.js"></script>
<script>
const chart_log_data = <?=json_encode($logdata)?>;
const chart_sess_data = <?=json_encode($sessdata)?>;
const labels = [];
for (let i = 0; i < 24; i++) {
  labels.push( ('0'+i).slice(-2) + '시 ~ ' + ('0'+(i+1)).slice(-2) + '시' );
}

const data1 = {
  labels: labels,
  datasets: [{
    label: '이전일',
    data: Object.keys(chart_log_data.yesterday.data).map(key => chart_log_data.yesterday.data[key]),
    borderColor: "#52AFAE",
    backgroundColor: "#52AFAE",
    fill: false,
    tension: 0.4
  }, {
    label: '지정일',
    data: Object.keys(chart_log_data.today.data).map(key => chart_log_data.today.data[key]),
    borderColor: "#D06356",
    backgroundColor: "#D06356",
    fill: false,
    tension: 0.4
  }, {
    label: '다음일',
    data: Object.keys(chart_log_data.nextday.data).map(key => chart_log_data.nextday.data[key]),
    borderColor: "#ABDCF7",
    backgroundColor: "#ABDCF7",
    fill: false,
    tension: 0.4
  }, {
    label: '평균',
    type: 'line',
    data: Object.keys(chart_log_data.today.data).map(key => (Number(chart_log_data.today.data[key])+Number(chart_log_data.yesterday.data[key])+Number(chart_log_data.nextday.data[key]))/3),
    borderColor: "#d2d7d9",
    fill: false,
    tension: 0.4
  }]
};
const data2 = {
  labels: labels,
  datasets: [{
    label: '이전일',
    data: Object.keys(chart_sess_data.yesterday.data).map(key => chart_sess_data.yesterday.data[key]),
    borderColor: "#52AFAE",
    backgroundColor: "#52AFAE",
    fill: false,
    tension: 0.4
  }, {
    label: '지정일',
    data: Object.keys(chart_sess_data.today.data).map(key => chart_sess_data.today.data[key]),
    borderColor: "#D06356",
    backgroundColor: "#D06356",
    fill: false,
    tension: 0.4
  }, {
    label: '다음일',
    data: Object.keys(chart_sess_data.nextday.data).map(key => chart_sess_data.nextday.data[key]),
    borderColor: "#ABDCF7",
    backgroundColor: "#ABDCF7",
    fill: false,
    tension: 0.4
  }, {
    label: '평균',
    type: 'line',
    data: Object.keys(chart_sess_data.today.data).map(key => (Number(chart_sess_data.today.data[key])+Number(chart_sess_data.yesterday.data[key])+Number(chart_sess_data.nextday.data[key]))/3),
    borderColor: "#d2d7d9",
    fill: false,
    tension: 0.4
  }]
};
const config1 = {
  type: 'bar',
  data: data1,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      }
    }
  },
};
const config2 = {
  type: 'bar',
  data: data2,
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: '<?=$today?> 시간별 방문기록'
      },
    },
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        display: true,
        title: {
          display: true
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: '세션수'
        },
        suggestedMin: 0,
      }
    }
  },
};

const chart1 = new Chart(
  document.getElementById('day_chart_pageview'),
  config1
);

const chart2 = new Chart(
  document.getElementById('day_chart_sess'),
  config2
);


let options1 = {
  series: [{
    name: "평균",
    color: "#d2d7d9",
    type: 'line',
    data: Object.keys(chart_log_data.today.data).map(key => Math.round((Number(chart_log_data.today.data[key])+Number(chart_log_data.yesterday.data[key])+Number(chart_log_data.nextday.data[key]))/3))
  },{
    name: "지정일",
    color: "#D06356",
  type: 'column',
    data: Object.keys(chart_log_data.today.data).map(key => chart_log_data.today.data[key])
  },{
    name: "이전일",
    color: "#52AFAE",
  type: 'column',
    data: Object.keys(chart_log_data.yesterday.data).map(key => chart_log_data.yesterday.data[key])
  },{
    name: "다음일",
    color: "#ABDCF7",
  type: 'column',
    data: Object.keys(chart_log_data.nextday.data).map(key => chart_log_data.nextday.data[key])
  }],
  chart: {
  height: 350,
  zoom: {
    enabled: false
  },
  animations: {
    enabled: false,
    easing: 'linear',
    speed: 800,
    animateGradually: {
      enabled: false,
      delay: 50
    },
    dynamicAnimation: {
      enabled: false,
      speed: 200
    }
  },
},
dataLabels: {
  enabled: false
},
stroke: {
  curve: 'smooth'
},
title: {
  text: '<?=$today?> 시간별 페이지뷰',
  align: 'left'
},
grid: {
    show: true,
    borderColor: '#ccc',
    strokeDashArray: 1,
    xaxis: {
        lines: {
            show: true
        }
    },
    yaxis: {
        lines: {
            show: true
        }
    },
},
xaxis: {
  categories: labels,
},

};

var chartssss = new ApexCharts(document.querySelector("#day_c_1"), options1);
chartssss.render();
</script>