溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了基于canvasJS在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>
<div id="chartContainer" ></div>
</body>
</html>看完上述內容，是不是對基于canvasJS在PHP中制作動態圖表的代碼解析有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
