關於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