关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的朋友共同进步。
问题1:chart.js是用canvas实现的,但是canvas不能直接设置父级元素的百分比。
解决办法:通过js获取父级元素的宽度,将获取到的宽度赋给canvas(这个也是解决第二个问题的先决条件)
代码如下:
这个是结构代码:
<div class="cavsBox cavsBox1" style="width: 55%;">
<canvas id="myChart" height="330"></canvas>
</div>
这个是js代码:
var $withd=$(".cavsBox1").width() //获取父级的宽度
document.getElementById("myChart").width=$withd-50 //赋宽度给canvas
//不要吐槽我原生和jq混用,懒0.0....
问题二:X轴上面刻度数据太多,全部显示出来显得太挤
这个问题我在百度上面搜索了老半天,都没有发现有效的解决办法,这也是我写下这边博文的原因0.0.
解决办法:刚开始我百度发现别的插件都有直接添加滚动条的方法,比如Highcharts就有直接添加滚动条的方法,但是这个插件使用canvas画图的方式实现统计图的,好像没有直接的办法实现添加滚动条,其实换个方式思考便会发现这个问题简直太简单了。。。既然第一个问题我已经解决,得到父级元素的百分百宽度,那我只要把canvas的宽度设置成父级元素的宽度的N倍,再让父级元素超出隐藏和滚动条显示不就实现了吗!@_@这么简单的问题纠结了半天,突然感觉自己好傻0.0.
代码如下:
结构代码:
<div class="cavsBox cavsBox1" style="overflow-x: scroll; width: 55%">
<canvas id="myChart" height="330"></canvas>
</div>
js代码:
var $withd=$(".cavsBox1").width() //获取父级的宽度
document.getElementById("myChart").width=$withd*3 //没错就是和刚刚一样的,唯一变得就是乘3
//不要吐槽我原生和jq混用,懒0.0....
如果还有不明白的童鞋(我感觉应该没有了吧)附上demo http://files.cnblogs.com/files/lamb97/%E6%95%B0%E6%8D%AE%E7%BB%9F%E8%AE%A1Demo.rar
关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理的更多相关文章
- 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度
引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是lengt ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- JS无法获取display为none的隐藏元素的宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素. 可使用jQuery Actual Plugin插件来完成,其源码如下: ;( function ( ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法
最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){ var a = document.getElementByIdx ...
- JS 用window.open()函数,父级页面如何取到子级页面的返回值?
父窗口:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
随机推荐
- Java开发环境搭建——CentOS配置
普通用户添加到sudoers u切换到root visudo进入编辑,找到root ALL=(ALL) ALL,在后面加上myusername ALL=(ALL) ALL 配置网络sudo ...
- linux系统硬件配置查看方法
一:查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...
- 深入浅出 Redis client/server交互流程
综述 最近笔者阅读并研究redis源码,在redis客户端与服务器端交互这个内容点上,需要参考网上一些文章,但是遗憾的是发现大部分文章都断断续续的非系统性的,不能给读者此交互流程的整体把握.所以这里我 ...
- 深入理解javascript原型和闭包 (转)
该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...
- Apache DdlUtils入门
Introduction DdlUtils is a small, easy-to-use component for working with Database Definition (DDL) ...
- 【JSP错误总结】无法访问jsp页面
运行环境:window 7 64位 JSP服务器 tomcat 7 现象:无法访问JSP页面,如下图所示:
- [原创]Matlab2016b打包为C++的lib文件
这几天在研究如何将Matlab的程序导入到C++进行调用. 由于需要使用到不少Matlab函数,所以之前就有些担心这些函数在导出后是否能够继续使用.不过之后觉得既然已经导出成了一个单独文件,相关运算应 ...
- touch
Linux touch 命令 在 Linux 下运用 touch 命令创建一个空文件.当然我们也可以使用其他命令例如 vi, nano 或是任意一个编辑工具来实现.但是你可能需要更多的步骤来完成操 ...
- Kinect开发资源汇总
Kinect开发资源汇总 转自: http://www.sigvc.org/bbs/forum.php?mod=viewthread&tid=254&highlight=kinec ...
- 第3月第15天 afconvert lame
1. //CAF 转换成MP3 (可以) afconvert -f mp4f -d aac -b 128000 /Users/amarishuyi/Desktop/sound1.caf/Users/a ...