【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表？

真相只有一个 lv.1

发布时间：2022-12-08 12:21:44 372

相关标签： # html# webkit# php# 数据库# 数据

【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表？_sed

来源 | https://www.geeksforgeeks.org/how-to-make-dynamic-chart-in-php-using-canvasjs/

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> 
    <div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html>

结果如下：

【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表？_php_02

【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表？_sed_03

【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表？_sed_04

文章来源： https://blog.51cto.com/u_15809510/5897845

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。