星期零

技术改变生活,分享让我们快乐!
随笔 - 159, 文章 - 0, 评论 - 234, 阅读 - 44万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法

默认情况下如下图

Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下,

示例代码:


window.onload = function () {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData,  {
                scaleOverride :true ,   //是否用硬编码重写y轴网格线
                scaleSteps : 15,        //y轴刻度的个数
                scaleStepWidth : 300,   //y轴每个刻度的宽度
                scaleStartValue : 0,    //y轴的起始值
                pointDot : true,        //是否显示点
                pointDotRadius : 5,     //点的半径
                pointDotStrokeWidth : 1,//点的线宽
                datasetStrokeWidth : 3, //数据线的线宽
                animation : true,       //是否有动画效果
                animationSteps : 60    //动画的步数
                } );
        }

核心代码:



scaleOverride :true ,   //是否用硬编码重写y轴网格线
 scaleSteps : 15,        //y轴刻度的个数
scaleStepWidth : 300,   //y轴每个刻度的宽度
scaleStartValue : 0,    //y轴的起始值

这样就会得到下面的效果,Y轴从0开始

 

编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示