CanvasJSをベースにしたPHPでの動的チャートの作成について詳しく解説

<img src="https://img.php.cn/upload/article/202008/04/2020080415471934199.jpg" alt="CanvasJSをベースにしたPHPでの動的チャートの作成について詳しく解説" >

CanvasJS は、Web ページ用の他のタイプのグラフを簡単に作成するための JavaScript ライブラリです。たとえば、棒グラフ、円グラフ、縦棒グラフ、面グラフ、折れ線グラフなどです。

製品の販売と購入を毎月表示できるグラフを作成する必要がある例を考えてみましょう。 2 つの配列を考慮しますが、データベースからそれらを考慮することもできます。データベースからデータを取得して配列に保存すると、canvasJS を使用して動的グラフィックスで簡単に描画できます。

ファイルを作成し、プロジェクト フォルダーに保存します。ファイル名 chart_sample.php には配列形式のデータが含まれています。最初の配列は購入した製品を表し、2 番目の配列は 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]) 
);

?>

rrree

関連する学習の推奨事項: PHP プログラミングの入門から熟練度まで

以上がCanvasJSをベースにしたPHPでの動的チャートの作成について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。