찾다

집 >백엔드 개발 >PHP 튜토리얼 >canvasJS를 기반으로 PHP에서 동적 차트를 만드는 방법에 대한 자세한 설명

canvasJS를 기반으로 PHP에서 동적 차트를 만드는 방법에 대한 자세한 설명

coldplay.xixi
coldplay.xixi앞으로
2020-08-04 15:48:582773검색

<img src="https://img.php.cn/upload/article/202008/04/2020080415471934199.jpg" alt="canvasJS를 기반으로 PHP에서 동적 차트를 만드는 방법에 대한 자세한 설명" ><img src="https://img.php.cn/upload/article/202008/04/2020080415471934199.jpg" alt="canvasJS를 기반으로 PHP에서 동적 차트를 만드는 방법에 대한 자세한 설명" >

CanvasJS是一个JavaScript库，用于轻松为网页创建其他类型的图表。例如条形图，饼图，柱形图，面积图，折线图等。

让我们以需要创建一个图表的示例为例，在该图表中我们可以显示每月销售和购买的产品。我们将考虑两个数组，我们也可以从数据库中考虑它们。一旦我们从数据库中获取数据并将其存储在数组中，它就可以使用canvasJS轻松绘制动态图形。

创建一个文件并将其保存在项目文件夹中。文件名chart_sample.php

CanvasJS는 JavaScript입니다. 웹 페이지에 대한 다른 유형의 차트를 쉽게 생성하기 위한 라이브러리입니다. 예를 들어 막대형 차트, 원형 차트, 세로 막대형 차트, 영역형 차트, 꺾은선형 차트 등이 있습니다.

매월 판매 및 구매한 제품을 표시할 수 있는 차트를 만들어야 하는 경우를 예로 들어보겠습니다. 우리는 두 개의 배열을 고려할 것이며 데이터베이스에서도 고려할 수 있습니다. 데이터베이스에서 데이터를 가져와 배열에 저장하면 canvasJS를 사용하여 동적 그래픽으로 쉽게 그릴 수 있습니다.

파일을 생성하여 프로젝트 폴더에 저장하세요. 파일 이름 chart_sample.php에는 배열 형식의 데이터가 포함되어 있습니다. 여기서 첫 번째 배열은 구매한 제품을 나타내고 두 번째 배열은 sols 제품 목록을 나타냅니다. 이제 canvasJS를 사용하여 그래픽을 그립니다. 예: 

<?php 
// First array for purchased product 
$purchased= array(10, 15, 19, 0, 5, 7, 0, 0, 12, 13, 10, 1);

// Second array for sold product 
$sold= array(7, 12, 14, 0, 3, 7, 0, 0, 10, 7, 5, 0);

// Data to draw graph for purchased products 
$dataPoints = array( 
  array("label"=> "Jan", "y"=> $purchased[0]), 
  array("label"=> "Feb", "y"=> $purchased[1]), 
  array("label"=> "March", "y"=> $purchased[2]), 
  array("label"=> "April", "y"=> $purchased[3]), 
  array("label"=> "May", "y"=> $purchased[4]), 
  array("label"=> "Jun", "y"=> $purchased[5]), 
  array("label"=> "July", "y"=> $purchased[6]), 
  array("label"=> "Aug", "y"=> $purchased[7]), 
  array("label"=> "Sep", "y"=> $purchased[8]), 
  array("label"=> "Oct", "y"=> $purchased[9]), 
  array("label"=> "Nov", "y"=> $purchased[10]), 
  array("label"=> "Dec", "y"=> $purchased[11]) 
);

// Data to draw graph for sold products 
$dataPoints2 = array( 
  array("label"=> "Jan", "y"=> $sold[0]), 
  array("label"=> "Feb", "y"=> $sold[1]), 
  array("label"=> "March", "y"=> $sold[2]), 
  array("label"=> "April", "y"=> $sold[3]), 
  array("label"=> "May", "y"=> $sold[4]), 
  array("label"=> "Jun", "y"=> $sold[5]), 
  array("label"=> "July", "y"=> $sold[6]), 
  array("label"=> "Aug", "y"=> $sold[7]), 
  array("label"=> "Sep", "y"=> $sold[8]), 
  array("label"=> "Oct", "y"=> $sold[9]), 
  array("label"=> "Nov", "y"=> $sold[10]), 
  array("label"=> "Dec", "y"=> $sold[11]) 
);

?>
<!DOCTYPE HTML> 
<html> 
<head>  
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> 
</script> 
  <script> 
    window.onload = function () {

      var chart = new CanvasJS.Chart("chartContainer", { 
        animationEnabled: true, 
        title:{ 
          text: "Monthly Purchased and Sold Product"
        },   
        axisY: { 
          title: "Purchased", 
          titleFontColor: "#4F81BC", 
          lineColor: "#4F81BC", 
          labelFontColor: "#4F81BC", 
          tickColor: "#4F81BC"
        }, 
        axisY2: { 
          title: "Sold", 
          titleFontColor: "#C0504E", 
          lineColor: "#C0504E", 
          labelFontColor: "#C0504E", 
          tickColor: "#C0504E"
        },   
        toolTip: { 
          shared: true 
        }, 
        legend: { 
          cursor:"pointer", 
          itemclick: toggleDataSeries 
        }, 
        data: [{ 
          type: "column", 
          name: "Purchased", 
          legendText: "Purchased", 
          showInLegend: true, 
          dataPoints:<?php echo json_encode($dataPoints, 
              JSON_NUMERIC_CHECK); ?> 
        }, 
        { 
          type: "column",   
          name: "Sold", 
          legendText: "Sold", 
          axisYType: "secondary", 
          showInLegend: true, 
          dataPoints:<?php echo json_encode($dataPoints2, 
              JSON_NUMERIC_CHECK); ?> 
        }] 
      }); 
      chart.render();

      function toggleDataSeries(e) { 
        if (typeof(e.dataSeries.visible) === "undefined"
              || e.dataSeries.visible) { 
          e.dataSeries.visible = false; 
        } 
        else { 
          e.dataSeries.visible = true; 
        } 
        chart.render(); 
      }

    } 
</script> 
</head>

<body> 
  <p id="chartContainer" style="height: 300px; width: 100%;"></p> 
</body> 
</html>
🎜관련 학습 권장 사항: 🎜초보부터 마스터까지 PHP 프로그래밍🎜🎜🎜

위 내용은 canvasJS를 기반으로 PHP에서 동적 차트를 만드는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript 数据库
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：차트 pChart를 생성하기 위해 PHP를 구문 분석하는 예다음 기사：차트 pChart를 생성하기 위해 PHP를 구문 분석하는 예

관련 기사

더보기