资讯专栏INFORMATION COLUMN

AntV的图表position方法变量传参解决办法

ityouknow / 4515人阅读

一句话总结:position([name, value])解决变量传参,如果已经解决你的问题,那么就不用往下看啦!!!

想了解更多,看下以下的叨叨叨~~~
借用官网的一段代码,链接:https://antv.alipay.com/zh-cn...

chart.interval().position("a*percent").color("name", ["#1890FF", "#13C2C2", "#2FC25B", "#FACC14", "#F04864", "#8543E0"]).adjust("stack").style({
lineWidth: 1,
stroke: "#fff",
lineJoin: "round",
lineCap: "round"
}).animate({
appear: {
  duration: 1200,
  easing: "bounceOut"
}
});

这里的position稍微解释下:
position:位置,二维坐标系内映射至 x 轴、y 轴;
及position()里的变量a*percent即指定x轴,y轴,但实际应用中我们希望定义一个公共方法,以变量形式传参生成多个图表,那么换做数组传参position([name, value]),name,value分别是你的指定的x轴、y轴变量。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103435.html

相关文章

  • 蚂蚁金服新一代数据可视化引擎 G2

    ...t等,经决定我这个项目用阿里旗下蚂蚁金服所开发G2图表库。 官方地址:https://antv.alipay.com/g2/do... Github:https://github.com/antvis 2016年发布开源库,时间虽短但库功能齐全,唯一不足是社区太少,对于我这类菜鸟来说是件...

    animabear 评论0 收藏0
  • antv g2理解总结

    G2 G2本身是一门图形语法,G2和传统图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析语义化数据可视化系统。它真正做到了让数据驱动图形,让你在使用它时候不用关心绘图细节,只需要知道你想通过它怎么展...

    baihe 评论0 收藏0
  • 三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

    最近阿里正式开源BizCharts图表库基于React技术栈,各个图表项皆采用了组件形式,贴近React使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用是ECharts图表库,下文将对3种图表库进行...

    draveness 评论0 收藏0
  • WakaTime数据同步展示工具

    ...了一个程序同步自己历史数据,不过一直没找到合适图表插件像官网那样展示数据信息。前些日子咨询了一下同事,得知了用 antv 可以绘制对应图表数据,刚好现在也处于失业阶段,就花了几天时间又重新做了一个项目用...

    focusj 评论0 收藏0
  • 第一次使用AntVF2

    ... chart.interval().position("genre*sold").color("genre"); // Step 4: 渲染图表 chart.render(); 嘿嘿,都是copy官网 相关API使用 最常用,毕竟其他我也不会 Axis-坐标轴配置 这个我主要用来自定义X轴Y轴内容。 就那这个数据来举例吧 list: [ ...

    livem 评论0 收藏0

发表评论

0条评论

ityouknow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<