码迷,mamicode.com
首页 > 其他好文 > 详细

chartist使用

时间:2018-01-17 18:27:39      阅读:1026      评论:0      收藏:0      [点我收藏+]

标签:com   def   nta   chart   div   中文   zh-cn   ajax   info   

最近项目中用到图表,自己使用了两个,一个是用在angular2中的chartist(api文档https://gionkunz.github.io/chartist-js/api-documentation.html#chartistbar-declaration-defaultoptions),一个是平常的使用的g2(https://antv.alipay.com/zh-cn/index.html),两个都很强大,g2是阿里开发的,文档是中文的,在这里面不会特别详细的介绍这两个,我就把项目中怎么用的直接贴出来,后续以个人开发项目需要,可以参看api.

chartist在angular2的使用:

技术分享图片

baChartist.components

从父组件拿到数据

技术分享图片

因为我们一般都是ajax请求数据的,所以我们在new对象时,要确保已经拿到数据了,我是按照自己想法做的,也许这种想法不太对,不过可以展示我想要的效果,我是根据angular2的声明周期做的,技术分享图片

因为一个页面可能会用到好几个图表,记得用完一个销毁这个对象

技术分享图片

技术分享图片

 

userDetails.components

技术分享图片先初始一些数据,一般我们都是通过ajax请求数据的,在我们获取完图表会给父组件返回一个Chartist对象,我们就要在拿到数据之后,重新画下这个图表

技术分享图片

可能会问this.chart怎么出来的,是子组件传过去的技术分享图片,在父组件接收一下技术分享图片这样,你页面就出来了。

 

chartist使用

标签:com   def   nta   chart   div   中文   zh-cn   ajax   info   

原文地址:https://www.cnblogs.com/gynStrive/p/8303858.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!