PHP 및 CanvasJS를 사용하여 데이터 시각화 차트 만들기-PHP 튜토리얼-php.cn

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

WBOY

풀어 주다： 2023-05-11 18:30:02

원래의

986명이 탐색했습니다.

데이터의 성장과 인터넷의 발달로 인해 데이터 처리와 시각화는 기술 산업에서 중요한 부분이 되었습니다. 마케팅, 금융, 의료 또는 기타 분야에 있든 데이터 시각화는 필수적입니다.

차트는 데이터 시각화에 매우 유용한 도구입니다. 차트의 역할은 데이터를 시각적 형태로 변환하여 데이터 추세를 더 쉽게 이해하고 분석할 수 있도록 하는 것입니다. 따라서 이 글에서는 PHP와 CanvasJS를 사용하여 데이터 시각화 차트를 만드는 방법을 소개하겠습니다.

CanvasJS는 대화형 및 동적 차트를 생성하기 위한 JavaScript 라이브러리입니다. CanvasJS는 수백 가지 차트 유형을 지원하며 다양한 장치와 브라우저에서 작동합니다. PHP와 CanvasJS를 사용하여 차트를 만들려면 다음 단계를 따라야 합니다.

1단계: CanvasJS 설치

CanvasJS를 사용하여 차트를 만들려면 먼저 CanvasJS를 설치해야 합니다. CanvasJS를 다운로드하고 설치하는 것은 소스 코드를 로컬 컴퓨터에 다운로드하는 것만큼 간단합니다. CanvasJS 공식 홈페이지에서 소스코드를 다운로드 받으실 수 있습니다. 다운로드 후 웹 서버에 압축을 풀면 바로 사용할 수 있습니다.

2단계: 데이터 생성

차트를 생성하기 전에 데이터가 필요합니다. PHP에서는 MySQL이나 다른 데이터베이스를 사용하여 데이터를 저장할 수 있습니다. 예를 들어, 다음 코드를 사용하여 MySQL 데이터베이스에서 데이터를 가져올 수 있습니다.

//连接至数据库
$con = mysqli_connect("host","username","password","database");

//查询数据
$result = mysqli_query($con,"SELECT * FROM 数据表名");

//将数据保存到数组中
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array("label"=>$row["标签"],"y"=>$row["数值"]);
}

//关闭连接
mysqli_close($con);

로그인 후 복사

이 코드 조각은 MySQL 데이터베이스에서 데이터를 가져와 데이터 배열에 저장합니다. 필요에 따라 쿼리의 데이터 테이블과 필드를 변경할 수 있습니다.

3단계: 차트 만들기

이제 데이터가 있으므로 차트를 만들어 보겠습니다. 다음 코드를 사용하여 CanvasJS에 데이터를 전달하여 대화형 차트를 만들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>使用PHP和CanvasJS创建数据可视化图表</title>
    <script src="canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>

    <script type="text/javascript">
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title:{
                    text: "数据可视化图表"
                },
                axisY: {
                    title: "数值"
                },
                data: [{
                    type: "column",
                    dataPoints: <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>
                }]
            });
            chart.render();
        }
    </script>
</body>
</html>

로그인 후 복사

이 코드 조각에서는 웹페이지를 만들고 CanvasJS 소스 코드를 그 페이지로 가져옵니다. 코드에서는 div 요소를 생성하고 해당 ID를 "chartContainer"로 설정합니다. 이것이 차트 컨테이너입니다. JavaScript를 사용하여 이 컨테이너에 차트를 만들고 렌더링합니다.

이제 일부 차트 설정을 처리해야 합니다. 여기서는 "열" 유형 차트를 사용하고 데이터 및 기타 세부 사항을 지정합니다. 여기서 제목, 데이터 레이블 등을 사용자 정의할 수 있습니다. CanvasJS는 다른 많은 차트 유형을 지원하며 필요에 맞는 유형을 선택할 수 있습니다.

여기서 우리는 단지 데이터 배열에 데이터를 추가하는 것이 아닙니다. json_encode를 사용하여 데이터 배열을 JavaScript 객체로 변환합니다. JSON_NUMERIC_CHECK 옵션은 출력 숫자가 문자열로 출력되지 않도록 합니다. 구체적인 내용은 CanvasJS 공식 문서에서 확인할 수 있습니다.

4단계: 로컬 또는 클라우드에서 테스트

마지막 단계는 애플리케이션을 테스트하는 것입니다. 로컬 컴퓨터에서 PHP 웹 서버를 실행할 수 있습니다. WAMP 서버를 사용하는 경우 localhost 또는 127.0.0.1 주소에서 브라우저를 열어 애플리케이션을 테스트할 수 있습니다. XAMPP 서버를 사용하는 경우 localhost 또는 127.0.0.1 주소에서 브라우저를 엽니다.

웹 호스팅 서비스를 사용하는 경우 호스팅 서버에 애플리케이션을 업로드하고 브라우저를 사용하여 액세스할 수 있습니다.

요약

PHP와 CanvasJS를 사용하여 데이터 시각화 차트를 만드는 과정은 매우 간단합니다. 먼저 데이터를 가져온 다음 CanvasJS를 사용하여 시각적 차트로 변환합니다. CanvasJS에는 선택할 수 있는 다양한 차트 유형과 사용자 정의 가능한 옵션이 있으므로 필요에 맞는 대화형 차트를 만들 수 있습니다.

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