chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html
默认情况下如下图

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开始
http://bubuko.com/analysis-201408.html
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]的更多相关文章
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 使用Highcharts生成折线图_at last
//数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...
- 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)
利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...
- 原生JS实现动态折线图
原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- 斯坦福大学公开课机器学习:machine learning system design | data for machine learning(数据量很大时,学习算法表现比较好的原理)
下图为四种不同算法应用在不同大小数据量时的表现,可以看出,随着数据量的增大,算法的表现趋于接近.即不管多么糟糕的算法,数据量非常大的时候,算法表现也可以很好. 数据量很大时,学习算法表现比较好的原理: ...
- storm正常任务数据量过大时造成定时任务不执行的问题
在执行storm的定时任务时,发现storm普通任务数据量过大时造成定时任务不执行, 同时设置了storm的普通任务和定时任务,定时任务设置5秒执行1次. 普通任务的数据时从spout中不停发射字符串 ...
- Mysql数据量较大时分页查询优化
据表 collect ( id, title ,info ,vtype) 就这4个字段,其中 title 用定长,info 用text, id 是主键,vtype是int,vtype是索引. 最后co ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
随机推荐
- 【转】java中volatile关键字的含义
java中volatile关键字的含义 在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言 ...
- 宁波uber优歩司机注册教程 UBER宁波司机注册指南!
自2012年Uber开始向全球进军以来,目前已进入全球56个国家和地区的市场,在全球超过270个城市提供服务, 而Uber公司的估值已高达412亿美元. [目前开通Uber优步叫车服务的中国城市] ...
- windows核心编程---第八章 使用内核对象进行线程同步
使用内核对象进行线程同步. 前面我们介绍了用户模式下线程同步的几种方式.在用户模式下进行线程同步的最大好处就是速度非常快.因此当需要使用线程同步时用户模式下的线程同步是首选. 但是用户模式下的线程同步 ...
- jquery点赞和取消点赞插件
<script> /* @author:Romey * 动态点赞 * 此效果包含css3,部分浏览器不兼容(如:IE10以下的版本) */ $(function(){ $("#p ...
- renderman、arnold及全局光照
走马观花看了一些实现全局光(global illumination)的文章,都是非实时电影级的.的确可以分为两个阵营,一是pixar的renderman中常用的reyes+点云,感觉pixar一路走来 ...
- hdu1004
Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...
- 关于jackson处理数据
/** * 将请求参数封装成Map对象 * * @param json 参数 * @return Object */ public static Map ...
- Java EE 编程中路径
版权声明:未经博主允许,不得转载 首先我们要限定一个范围,是一个项目,或是以个访问地址..就先以一个项目为限定的范围 前述: 学过物理学的都知道相对运动和绝对运动, 虽然是相似的概念,但这里的要简单得 ...
- Swift----方法 、 下标 、 继承 、 初始化 、 析构方法 、 可选链
下标的使用 1.1 问题 下标可以定义在类.结构体和枚举中,可以认为是访问对象.集合或序列的快捷方式,不需要再调用实例的特定的赋值和访问方法. 本案例定义一个Matrix结构体,用于呈现一个Doubl ...
- 测试cookie的读写
js文件使用utf8编码 <p><img id="img" onclick="javascript:var s=document.createEleme ...