Chart.js统计图PHP折线图实现,Y轴变整数
Chart.js修改Y轴版 地址:https://kodo.79524795.vip/js/Chart.js
Chart.js原版:地址:https://www.html5tricks.com/demo/chartjs/Chart.js
用原版的话,我这代码你没法用
传的数据 格式在最后。
<!DOCTYPE html> <html> <head> <title>会员中心</title> <!--统计图开始--> <h1>平和质:<h1><br/> <script type="text/javascript" src="/Chart.js"></script> <canvas id="canvas" height="450" width="600" style="background:#dfe4fa;"></canvas> <script> var myData = new Array(); myData = <?php echo $phzarr;?>; var scaleSteps = 10; var max =Math.max.apply(null, myData); var scaleOverride = true; var scaleStepWidth =Math.floor(max / scaleSteps) + 1; var Ymax = scaleStepWidth * scaleSteps; var scaleStartValue = 0; var config = new Array(); config['scaleOverride'] = scaleOverride; config['scaleSteps'] = scaleSteps; config['scaleStepWidth'] = scaleStepWidth; config['scaleStartValue'] = scaleStartValue; var lineChartData = { labels : <?php echo $phztime;?>, datasets : [ { fillColor : "rgba(0,0,0,0)", //线下部分颜色 strokeColor : "rgba(0,0,0,0)", //线颜色 pointColor : "rgba(144, 238 ,144, 0.5)", //线上的点颜色 144, 238 ,144, 0.5 浅绿色 pointStrokeColor : "#000", data : <?php echo $phzarr;?> } ], configs:config } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); </script> <!--统计图结束--> </body> </html>
数据格式:
$phztime ='["January","February","March","April","May","June","July"]';
data里面的所有php变量值格式为:
$phzarr='[28,48,40,19,96,27,100]';