最近几天都在研究chartist，因为echarts生成的图是位图，导成PDF的时候不够清晰。而chartist是搜到的免费插件中呼声较高的，基于SVG。
今天主要是想举一些代码例子给大家，介绍下如何同时显示折线图和柱状图。chartist是响应式的，虽然我对响应式还不是很理解，理解的童鞋欢迎留言，算礼尚往来吧，哈哈
首先展示下最终的样子：
chartist本身没有在同一个图上既画折线图又画柱状图的功能，但是，通过孜孜不倦的搜索，发现了workaround。接下来说下思路：
- 准备三个DIV，一个放折线图chartLine，一个放柱状图chartBar。第三个DIV的作用暂且不说
- 通过CSS把两个chart叠到一起，细心的观众就会发现，叠到一起后，折线图和柱状图的x轴label不对齐。折线图是在tick下显示标签和点，柱状图则是在两个tick之间显示标签和点。
那这时候我们就要把折线图的点往后挪一半。 - 如何让tooltip顺利显示呢。。。大家知道，我两张图是叠到一起的，鼠标移上去默认只会出发最上面一层的事件。所以我们要用到pointer-events这个属性。
- 如何让一个y轴显示到右边呢，这就是第三个DIV的作用。画一个空的图，只需要显示坐标轴。至于为什么不直接把折线图或者柱状图的Y轴放到右边，是因为经过实验，
如果那样做，就会很难调整这个位置，让两幅图好好的叠到一起。这也应该跟我前端比较挫有关，反正我调了半天没调好。。。
具体的代码看这里
主要实现参考了这里的讨论