最近幾天都在研究chartist，因為echarts生成的圖是位圖，導成PDF的時候不夠清晰。而chartist是搜到的免費插件中呼聲較高的，基於SVG。
今天主要是想舉一些代碼例子給大家，介紹下如何同時顯示折線圖和柱狀圖。chartist是響應式的，雖然我對響應式還不是很理解，理解的童鞋歡迎留言，算禮尚往來吧，哈哈
首先展示下最終的樣子：
chartist本身沒有在同一個圖上既畫折線圖又畫柱狀圖的功能，但是，通過孜孜不倦的搜索，發現了workaround。接下來說下思路：
- 准備三個DIV，一個放折線圖chartLine，一個放柱狀圖chartBar。第三個DIV的作用暫且不說
- 通過CSS把兩個chart疊到一起，細心的觀眾就會發現，疊到一起后，折線圖和柱狀圖的x軸label不對齊。折線圖是在tick下顯示標簽和點，柱狀圖則是在兩個tick之間顯示標簽和點。
那這時候我們就要把折線圖的點往后挪一半。 - 如何讓tooltip順利顯示呢。。。大家知道，我兩張圖是疊到一起的，鼠標移上去默認只會出發最上面一層的事件。所以我們要用到pointer-events這個屬性。
.datcharts {pointer-events: none}
.datcharts .ct-point {pointer-events: auto}
.datcharts .ct-bar {pointer-events: auto}
- 如何讓一個y軸顯示到右邊呢，這就是第三個DIV的作用。畫一個空的圖，只需要顯示坐標軸。至於為什么不直接把折線圖或者柱狀圖的Y軸放到右邊，是因為經過實驗，
如果那樣做，就會很難調整這個位置，讓兩幅圖好好的疊到一起。這也應該跟我前端比較挫有關，反正我調了半天沒調好。。。
具體的代碼看這里
主要實現參考了這里的討論