关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

时间：2022-02-21 02:57:53

　　今天在做一个数据统计的界面的时候，需要做折线统计图，在网上找了一圈发现数据统计的插件还是不少的，本着轻量级的的原则选择了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

　　

相关文章