Chartist.js-同时画柱状图和折线图

最近几天都在研究chartist,因为echarts生成的图是位图,导成PDF的时候不够清晰。而chartist是搜到的免费插件中呼声较高的,基于SVG。

今天主要是想举一些代码例子给大家,介绍下如何同时显示折线图和柱状图。chartist是响应式的,虽然我对响应式还不是很理解,理解的童鞋欢迎留言,算礼尚往来吧,哈哈

首先展示下最终的样子:

Chartist.js-同时画柱状图和折线图

chartist本身没有在同一个图上既画折线图又画柱状图的功能,但是,通过孜孜不倦的搜索,发现了workaround。接下来说下思路:

  1. 准备三个DIV,一个放折线图chartLine,一个放柱状图chartBar。第三个DIV的作用暂且不说
  2. 通过CSS把两个chart叠到一起,细心的观众就会发现,叠到一起后,折线图和柱状图的x轴label不对齐。折线图是在tick下显示标签和点,柱状图则是在两个tick之间显示标签和点。

    那这时候我们就要把折线图的点往后挪一半。
  3. 如何让tooltip顺利显示呢。。。大家知道,我两张图是叠到一起的,鼠标移上去默认只会出发最上面一层的事件。所以我们要用到pointer-events这个属性。
  4. 如何让一个y轴显示到右边呢,这就是第三个DIV的作用。画一个空的图,只需要显示坐标轴。至于为什么不直接把折线图或者柱状图的Y轴放到右边,是因为经过实验,

    如果那样做,就会很难调整这个位置,让两幅图好好的叠到一起。这也应该跟我前端比较挫有关,反正我调了半天没调好。。。

具体的代码看这里

主要实现参考了这里的讨论

上一篇:窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?


下一篇:linux 压缩文件的命令总结