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