PHP 및 Highcharts를 사용하여 실시간 데이터 시각화 차트 만들기

인터넷 기술의 지속적인 발전으로 인해 데이터 분석 및 시각화는 기업 및 개인 애플리케이션에서 없어서는 안될 부분이 되었습니다. 그 중에서도 실시간 데이터 시각화는 비교할 수 없는 중요성을 보여줍니다. 이를 통해 사용자는 실시간으로 데이터 변경 사항을 확인하고 신속하게 결정을 내려 최상의 이점을 얻을 수 있습니다.

실시간 데이터 시각화 테이블을 제시하기 위해서는 동적으로 그릴 수 있는 도구가 필요합니다. Highcharts는 그러한 도구로서 적극 권장됩니다. 동시에 PHP는 매우 인기 있고 배우기 쉬운 웹 프로그래밍 언어입니다. 따라서 PHP와 Highcharts를 함께 사용하여 실시간 데이터 시각화 차트를 만들 수 있습니다.

먼저 데이터를 준비해야 합니다. 실시간 데이터 시각화에서는 데이터 변경이 언제든지 발생합니다. 따라서 여기서는 시뮬레이션된 데이터 방법을 사용합니다. 난수 생성기를 사용하여 지속적으로 데이터를 생성하는 PHP 스크립트를 작성할 수 있습니다. 다음은 데이터를 시뮬레이션하는 코드입니다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id
";
  echo "data: $msg
";
  echo "
";
  ob_flush();
  flush();
}

$i = 0;
while(true) {
    $data = rand(0, 100);
    sendMsg($i++, $data);
    sleep(1);
}
?>

위 코드에서는 먼저 Content-Type을 text/event-stream으로 설정하여 이것이 이벤트 스트림임을 브라우저에 알립니다. 그런 다음 데이터를 보낼 때마다 브라우저와 서버 간의 데이터 교환을 용이하게 하기 위해 이번에 보낸 데이터의 ID를 나타내는 ID를 보냅니다. 마지막으로 sendMsg 함수를 통해 데이터를 전송하게 되므로 지속적으로 데이터가 생성되어 브라우저로 전송될 수 있다.

다음으로, 이 데이터를 실시간으로 획득하고 구문 분석할 수 있는 방법이 필요합니다. 여기서는 JavaScript 라이브러리인 EventSource를 선택했습니다. H5의 새로운 API로 주로 이벤트 스트림을 브라우저에 푸시하는 서버를 구축하는 데 사용됩니다. 다음은 EventSource를 사용하기 위한 코드입니다.

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 在这里进行数据处理
  };
});

위 코드에서는 먼저 EventSource 객체를 생성하고 연결하려는 서버의 URL을 지정합니다. 그런 다음 서버가 데이터를 보낼 때 onmessage 이벤트 응답 기능을 설정하면 이 기능이 트리거되고 데이터가 매개변수로 전달됩니다. 그런 다음 onmessage 함수에서 데이터 표시와 같은 데이터 처리를 수행할 수 있습니다.

마지막으로 데이터를 차트로 시각화하려면 Highcharts를 사용해야 합니다. Highcharts는 선형 차트, 막대 차트, 원형 차트 등과 같은 다양한 유형의 차트를 생성할 수 있는 차트 그리기용 JavaScript 라이브러리입니다. 다음은 데이터를 선 차트로 시각화하는 코드입니다.

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实时数据可视化'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数据'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: '数据',
    data: []
  }]
});

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 把数据转化成坐标
    var point = [new Date().getTime(), parseInt(data)];

    // 把坐标添加到图表中
    var series = chart.series[0];
    var shift = series.data.length > 20; // 确保图表上只有20个点
    series.addPoint(point, true, shift);
  };
});

위 코드에서는 먼저 고급 차트 개체를 만들고 제목, 축, 데이터 계열과 같은 몇 가지 기본 설정을 추가합니다. 그런 다음 Document Ready 이벤트에서 EventSource 객체도 생성하고 서버에서 보낸 데이터를 처리하기 위한 onmessage 이벤트 응답 함수를 설정했습니다. 데이터를 좌표로 변환하고 좌표를 다시 꺾은선형 차트에 추가합니다.

이러한 방식으로 PHP와 Highcharts를 사용하여 실시간 데이터 시각화 차트를 만들 수 있습니다. 우리는 PHP를 사용하여 임의의 데이터를 생성하고 이 데이터를 실시간으로 브라우저에 보냅니다. 그런 다음 JavaScript의 EventSource 개체를 사용하여 이 데이터에 응답하고 Highcharts를 통해 데이터를 선 차트로 시각화합니다. 이러한 방식으로 사용자는 데이터의 변화를 실시간으로 확인할 수 있어 사용자가 분석할 수 있는 데이터의 효율성이 향상됩니다.

위 내용은 PHP 및 Highcharts를 사용하여 실시간 데이터 시각화 차트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!