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]';