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


 

posted @   79524795  阅读(117)  评论(0)  编辑  收藏  举报
相关博文：
·  真-PHP使用curl模拟Formdata
·  TP5导出EXCEL表格（附带样式修改）
·  Chart.js绘制动态折线图
·  Chartist.js折线图
·  应用实例(一)：折线图
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手