Chart.js统计图PHP折线图实现，Y轴变整数

最新推荐文章于 2024-07-27 22:51:17 发布

河南虎爷

最新推荐文章于 2024-07-27 22:51:17 发布

阅读量151

点赞数

分类专栏： PHP 文章标签： php

本文链接：https://blog.csdn.net/qq_45450789/article/details/124296636

版权

PHP 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

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
评论
Chart.js统计图PHP折线图实现，Y轴变整数

Chart.js修改Y轴版地址：https://kodo.79524795.vip/js/Chart.jsChart.js原版：地址：https://www.html5tricks.com/demo/chartjs/Chart.js用原版的话，我这代码你没法用传的数据格式在最后。<!DOCTYPE html><html><head> <title>会员中心</title> <!--统计图开始-..
复制链接

扫一扫

专栏目录