基于canvasJS在PHP中制作動(dòng)態(tài)圖表
CanvasJS是一個(gè)JavaScript庫，用于輕松為網(wǎng)頁創(chuàng)建其他類型的圖表。例如條形圖，餅圖，柱形圖，面積圖，折線圖等。
讓我們以需要?jiǎng)?chuàng)建一個(gè)圖表的示例為例，在該圖表中我們可以顯示每月銷售和購買的產(chǎn)品。我們將考慮兩個(gè)數(shù)組，我們也可以從數(shù)據(jù)庫中考慮它們。一旦我們從數(shù)據(jù)庫中獲取數(shù)據(jù)并將其存儲(chǔ)在數(shù)組中，它就可以使用canvasJS輕松繪制動(dòng)態(tài)圖形。
創(chuàng)建一個(gè)文件并將其保存在項(xiàng)目文件夾中。文件名chart_sample.php包含數(shù)組形式的數(shù)據(jù)，其中第一個(gè)數(shù)組代表購買的產(chǎn)品，第二個(gè)數(shù)組代表sols產(chǎn)品列表。現(xiàn)在，使用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 style='height: 300px; width: 100%;'></div> </body> </html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用 kind 和 Docker 啟動(dòng)本地的 Kubernetes環(huán)境2. idea設(shè)置提示不區(qū)分大小寫的方法3. idea設(shè)置代碼格式化的方法步驟4. ASP.NET MVC前臺(tái)動(dòng)態(tài)添加文本框并在后臺(tái)使用FormCollection接收值5. 使用PHP批量生成隨機(jī)用戶名6. phpstorm斷點(diǎn)調(diào)試方法圖文詳解7. 如何禁用IntelliJ IDEA的LightEdit模式(推薦)8. ASP.NET MVC使用異步Action的方法9. IntelliJ IDEA創(chuàng)建web項(xiàng)目的方法10. vue的路由動(dòng)畫切換頁面無法讀取meta值的bug記錄
網(wǎng)公網(wǎng)安備