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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值