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

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开始

时间: 2024-12-26 02:36:43

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]的相关文章

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

效果预览 实例代码 <div class="htmleaf-container"> <div class="htmleaf-content"> <div style="width:30%;margin:0 auto;"> <div> <canvas id="canvas" height="450" width="600"><

使用Highcharts生成折线图_at last

//数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $dbconn=oci_connect("dnc-local","dnc-local","orcl")or die("数据库连接错误"); ?> 读取数据:device_query.php <?php require 'co

快速生成折线图及代码详解

快速生成折线图时,只需要修改代码中的以下数据: 1.Y轴刻度个数:Ycounts 2.Y轴最小刻度数:YminValue 3.横坐标:数组mouth 4.标题:strTopic 5.用户数据:数组d 6.[可选]修改背景色:代码中27行改为所需要的颜色即可 完整代码: 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using Sys

highcharts实例教程一:结合php与mysql生成折线图

Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.折线图.面积图.柱状图.饼图.散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者.非商业机构是免费使用的. 案例场景:要求针对技术cto网站,直观地显示一周网站pv.

MongoDB数据量较大时如何构建索引--减少业务最少影响

在数据量较大或请求量较大,直接建立索引对性能有显著影响时,可以利用复制集(数据量较大时一般为线上环境,使用复制集为必然选择或者使用分片.)中部分机器宕机不影响复制集工作的特性,继而建立索引. 备注:添加索引的表使用WT引擎,数据量有1.5亿左右. 1. 副本集配置参数 节点1: $ more shard1.conf dbpath=/data/users/mgousr01/mongodb/dbdata/shard1_1 logpath=/data/users/mgousr01/mongodb/lo

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

下图为四种不同算法应用在不同大小数据量时的表现,可以看出,随着数据量的增大,算法的表现趋于接近.即不管多么糟糕的算法,数据量非常大的时候,算法表现也可以很好. 数据量很大时,学习算法表现比较好的原理: 使用比较大的训练集(意味着不可能过拟合),此时方差会比较低:此时,如果在逻辑回归或者线性回归模型中加入很多参数以及层数的话,则偏差会很低.综合起来,这会是一个很好的高性能的学习算法. 原文地址:https://www.cnblogs.com/chenwenyan/p/8326027.html

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

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

PowerDesigner16 生成的备注脚本,在sql server 2008 中报“对象名 &#39;sysproperties&#39; 无效”的错误的解决办法

主要是在建模时我们对表.列增加了些说明注释,而Sql2005之后系统表sysproperties已废弃删除而改用sys.extended_properties所致. 1.修改Table TableComment 部分 菜单Database -> Edit Current DBMS 窗体 General 选项卡 下 Script -> Objects -> Table –> TableComment 在开头部分替换如下: [if exists (select 1           

mysql如果在使用多表连查时,两张或多张表出现相同的字段名的解决办法

多表查询时,mysql语句为: select a.*,b.* from 表A名 as a left join 表B名 as b on a.字段名=b.字段名; 当出现两个相同字段名字时,比如相同字段名为name,就可以a.name as aname,b,name as bname; 语句为: select a.name as aname,b.name as bname from as a left join 表B名 as b on a.字段名=b.字段名; mysql如果在使用多表连查时,两张或