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]的更多相关文章

  1. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  2. 使用Highcharts生成折线图_at last

    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...

  3. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  4. 原生JS实现动态折线图

    原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  5. 斯坦福大学公开课机器学习:machine learning system design | data for machine learning(数据量很大时,学习算法表现比较好的原理)

    下图为四种不同算法应用在不同大小数据量时的表现,可以看出,随着数据量的增大,算法的表现趋于接近.即不管多么糟糕的算法,数据量非常大的时候,算法表现也可以很好. 数据量很大时,学习算法表现比较好的原理: ...

  6. storm正常任务数据量过大时造成定时任务不执行的问题

    在执行storm的定时任务时,发现storm普通任务数据量过大时造成定时任务不执行, 同时设置了storm的普通任务和定时任务,定时任务设置5秒执行1次. 普通任务的数据时从spout中不停发射字符串 ...

  7. Mysql数据量较大时分页查询优化

    据表 collect ( id, title ,info ,vtype) 就这4个字段,其中 title 用定长,info 用text, id 是主键,vtype是int,vtype是索引. 最后co ...

  8. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  9. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

随机推荐

  1. 使用Spring 发送 Email !!!!

    邮件服务器: 邮件服务器提供了邮件系统的基本结构,包括邮件传输,邮件分发,邮件存储等功能,以确保邮件能够发送到互联网中的任意地方. 邮件服务器就像我们生活中的邮局,为人们提供邮件服务.要保证邮件被正确 ...

  2. Java 正则表达式 量词 --- 三种匹配模式【贪婪型、勉强型、占有型】

    1.Greediness(贪婪型):最大匹配X?.X*.X+.X{n,}都是最大匹配.例如你要用“<.+>”去匹配“a<tr>aava</tr>abb”,也许你所期 ...

  3. C#查找以某个字母开头另一字母结尾的字符串

    using System; using System.Text.RegularExpressions; namespace ConsoleApplication1 { class Program { ...

  4. dynamic_cast 和 static_cast 隐式类型转换的区别

    首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 第1部分. 隐式类型转换 又称为“标准转换”,包括以下几种情况:1) 算术转换(Arithmetic conversion ...

  5. Python学习感悟

    学习任何新知识,我自己偏向于在实践中学习,这样效率更高:如果只是学习基本概念,会很枯燥. 现在的问题是:不是所有的新知识都可以在实践中学习!

  6. Android DownloadProvider学习

    DownloadProvider 简介 DownloadProvider 是Android提供的DownloadManager的增强版,亮点是支持断点下载,提供了“开始下载”,“暂停下载”,“重新下载 ...

  7. Sunny-Code 最终版总结会议

    设想和目标 我们的软件要解决什么问题?是否定义得很清楚? 我们打算做一款集成小蝴蝶功能.Ip快速修改功能.WiFi共享功能的一款软件.目的是为了解决晚上小蝴蝶断线重连问题.还有新生不会修改IP问题. ...

  8. memcache命中统计

    把memcache.php放在可以访问的位置,默认账户admin,密码admin 参考http://a.linji.cn/2011/12/memcachedphp.txt http://linji.c ...

  9. ORACLE 各种连接

    数据说明: select * from dave;ID NAME 安庆 dave bl bl dave dba sf-express dmm select * from b1;ID NAME dave ...

  10. python用Tesseract读取图片中的中文,出现乱码

    到http://download.csdn.net/detail/wanghui2008123/7621567下载中文简体包 然后找到tessdata目录,把eng.traineddata替换为chi ...