最近幾天都在研究chartist苇本，因為echarts生成的圖是位圖，導成PDF的時候不夠清晰辜纲。而chartist是搜到的免費插件中呼聲較高的，基于SVG俊性。
今天主要是想舉一些代碼例子給大家，介紹下如何同時顯示折線圖和柱狀圖。chartist是響應式的，雖然我對響應式還不是很理解萝究，理解的童鞋歡迎留言，算禮尚往來吧锉罐，哈哈
首先展示下最終的樣子：
最終效果
chartist本身沒有在同一個圖上既畫折線圖又畫柱狀圖的功能帆竹，但是，通過孜孜不倦的搜索脓规，發(fā)現(xiàn)了workaround栽连。接下來說下思路：
- 準備三個DIV，一個放折線圖chartLine侨舆，一個放柱狀圖chartBar秒紧。第三個DIV的作用暫且不說
- 通過CSS把兩個chart疊到一起，細心的觀眾就會發(fā)現(xiàn)挨下，疊到一起后熔恢，折線圖和柱狀圖的x軸label不對齊。折線圖是在tick下顯示標簽和點臭笆，柱狀圖則是在兩個tick之間顯示標簽和點叙淌。
那這時候我們就要把折線圖的點往后挪一半。 - 如何讓tooltip順利顯示呢愁铺。鹰霍。。大家知道茵乱，我兩張圖是疊到一起的茂洒，鼠標移上去默認只會出發(fā)最上面一層的事件。所以我們要用到pointer-events這個屬性瓶竭。
.datcharts {pointer-events: none}
.datcharts .ct-point {pointer-events: auto}
.datcharts .ct-bar {pointer-events: auto}
- 如何讓一個y軸顯示到右邊呢督勺，這就是第三個DIV的作用。畫一個空的圖在验，只需要顯示坐標軸玷氏。至于為什么不直接把折線圖或者柱狀圖的Y軸放到右邊，是因為經過實驗腋舌，
如果那樣做盏触，就會很難調整這個位置，讓兩幅圖好好的疊到一起块饺。這也應該跟我前端比較挫有關赞辩，反正我調了半天沒調好。授艰。辨嗽。
具體的代碼看這里
主要實現(xiàn)參考了這里的討論
