柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们提供了以下五种通用的交互行为: 饼图选中 柱状图选中 图表平移 pan 图表缩放 图表 swipe 快扫 2.ScrollBar Scroll bar 是一个静态插件,主要用于辅助 pan 和 pinch 交互. 滚动条只是为 pan 服务的. 数据结构 数据结构: [ { provinceShor

前天遇到个坑,把我给坑死了 ,在帮朋友做一个微信公众号的项目,使用的vue全家桶,有个模块需要用到数据可视化展现,之前做项目的时候用过antv,比较熟悉,因为是移动端的项目,所以用的是antv f2这个可视化框架,按照之前写的方式都做完之后,最后发现下面出现了两个相同的legend,找了半天也没发现问题出在哪,百思不得其解 watch:{ statisticsList: { handler(newValue, oldValue) { // 更新数据 this.lineChart.changeDa

AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex), 完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验. AntV F2官方文档地址:https://antv.alipay.com/zh-cn/f2/3.x/ 话不多说,直接进入正题: Antv F2官方比较友好,给我们提供了两种方式方便我们使用,分别是CDN方式(引入在线资源 <script src="htt

官方组件版 https://github.com/antvis/wx-f2/tree/custom-components 官方npm版 https://github.com/antvis/wx-f2 mpvue中使用 https://www.jianshu.com/p/f2cdca74964b .

mobile chart & f2 https://www.yuque.com/antv/f2/getting-started https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html npm install @antv/f2 --save // import 或 require const F2 = require('@antv/f2'); <canvas id="myChart" width="400"

写在最前     没有接触过 AntV 的诸位看客可通过这篇不成文的文章稍作了解.最近 病毒猖獗,遂抽空做了一个相关小 DEMO.数据可视化方面的使用的是 AntV F2,前端框架使用 Vue 快速成型,使用与 Vue 配合较好的 Vant 最为UI框架.以节约时间.此文以一个小小的示例(渲染能够横向滚动的图表),来填沧海一粟之坑,也算是入门.因为博客园常有神出没,故作此引以节约贵神时间,大神请出门左转.如有雅致对鄙人指点一番亦感激不尽! 思路 通过 Interaction 实现平移,通过 Sc

上篇文章提到的canvas画布,用到f2组件,组件地址https://gw.alipayobjects.com/os/antv/assets/f2/3.0.0/f2.js或利用npm下载:npm install @antv/f2  - - save

踩坑中~ 官方文档 https://www.yuque.com/antv/f2/intro 毕竟不像echarts接触过,所以还是先看看文档较好 github https://github.com/simaQ/f2-canvas https://github.com/antvis/wx-f2 用mpvue-echarts写,这个回头再来填坑,看了官方的教程感觉要引入mpvue其实和引入vant组件的没啥太大区别,mpvue-echarts还是比较方便的 坑还是要踩的 !标记标记

介绍 最近物联网应用一直很火,也打算做一些这方面的尝试,就边学边做在家花了2天时间做了一个简单demo,功能很简单,使用emq x 作为mqtt broker,用python写了一个定时抓取主机CPU利用并发布消息,用微信小程序和VUE客户段订阅消息并实时监控CPU使用情况,场景非常的简单,就是一个订阅/分发的过程,使用任何的MQ产品都能实现,但不同的mqtt协议相对与其它的mq产品更轻量级,同时也是专为物联网应用设计的,所以用起来更方便.随便也把过程遇到的一些问题说明一下,也可以让想了解和尝试

小蚂蚁说: 2018 年 AntV 品牌日以知新.知心为主题,旨在让产品一直「知新」,与用户一直「知心」.AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践.在过去一年,有 46 位开发者为AntV 贡献代码. 本文小蚂蚁将为大家简单介绍 AntV 的进化成果,了解详情记得点击下方链接哦~ AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2.专注解决流程与关系分析的图表库 G6.适于对性能.体

AntV在使用柱状图时不能单独设置一个柱状图的宽度,但可以设置整体高度,宽度,代码如下 const chart = new F2.Chart({ id: 'c1', // 指定图表容器 ID width: 500, // 指定图表宽度 height: 300 // 指定图表高度 });

2.横坐标为字符串的代码实例 cell={‘PLS’,’SVM’,’RF’,’NNET’,’NB’,’PLR’,’C5.0′,’PDA’,’KNN’,’GLM’,’BCT’};%分类方法yData=[7.78 7.16 7.75 9.06 1.94 5.47 6.19 3.44 6.38 1.81 9.03];%mean rank值n=size(cell,2);x=1:1:n;plot(x,yData,’k-‘,x,yData,’rs’);ylabel(‘mean rank’);xlabel(‘

问题现象: 数据源2003版本的EXCEL文件,第一列是空白,数据是从第二列开始的.所以SSIS中用EXCEL数据源倒入这个EXCEL时,所有的列显示不出来,显示的是F1,F2  - FN. 解决方法: 1,右击Excel数据源,点击Show Advanced Edit. 2,在Component Properties->Custom Properties -〉OpenRowset , 设置跳过第一列即可. 如下图:Report$A2:AB Report$是你导入的Excel的sheet页的名字

      Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还可以随时根据企业的情况调整流程,通过流程监控实时分析流程实例的运行数据分析,提供企业流程的不断优化的依据,同时智能流程版本管理功能,当流程变化转大时旧的实例按旧的流程定义运转,新启动的流程按新版本的流程运转,新旧隔离互不影响.   F2本着 专注的精神.精湛的技术.卓越的品质.做业界最优秀的流程引

索引如下 F2工作流引擎遵循参考WFCM标准规范,符合中国国情特色,更轻量级的工作流引擎,支持多种数据库(mmsqlserver,mysql,oracle),有强大智能的组织模型接口可快速应用到任何基于.net管理系统,实现工作流审批.业务流(BPM)的智能性.灵活性.简单实用性,具有强大的扩展性.集成性.独立性.开放性和稳定性,支持可视化的流程设计器来设计流程的定义,Web端纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.会签.聚合都可以非常方便快捷地实现

F2工作流体系架构概览图 为了能更好的了解F2工作流引擎的架构体系,花了些时间画了整个架构的体系图.F2工作流引擎遵循参考WFCM规范,目标是实现轻量级的工作流引擎,支持多种数据库及快速应用到任何基于.net管理系统,实现工作流审批.业务流(BPM)的智能性.灵活性.简单实用性,具有强大的扩张性.集成性.独立性.开放性和稳定性,实现了可视化的流程设计或优化,流程的定制完全是通过鼠标拖.拉.拽的方式来完成,常见的串行.并行.分支.聚合都可以非常方便快捷地实现,依托于工作流强大的自定义,管理员还可以

特点:引入Bootstrap开源UI样式和fontawesome图标集 扁平化样式使用界面更舒服,按钮主题可快速定义更换,对于集成到业主系统UI图标更加丰富. 以下截取部分图片展示,更多请联系作者登录F2工作流引擎的演示系统! 演示系统的登录界面 待办界面 流程管理界面 运动状态监控图表 Web在线流程设计器,纯JS实现,通过在线拖.拉.拽,进行流程设计,兼容各大主流浏览器!

在工作中除了要做一些常用的图表之外,不时还会有一切奇怪图表的制作需求. 今天的内容主要记录的是如何对excle图表的次横坐标及次纵坐标进行调试,以及如何自定义调整轴标签 首先看下如何做次纵坐标,工作中总有两个相关数据但是单位不一致或数量级不一致的状况,这时候要将两组数据整合到一起就要用到次级纵坐标了. 下图为一组购买数据,要将购买人数及购买金额放在一个表格内 首先选中作图数据,然后插入数据图表 选择插入组合图 然后右键图表,选择更改数据图表类型 然后勾选一个数据为次坐标 更改后的数据表 还有一种

今天蚂蚁金服发布了一套数据可视化规范AntV. AntV 是一套专业的数据可视化规范,这套规范的目的是为了让可视化的使用者更懂数据可视化.这套规范是蚂蚁金服在可视化建设过程中的理论沉淀,它可以很好得指引产品经理,设计师和工程师怎样正确得使用可视化及可视化技术,规避常见的错误,可以当学习材料,也可以作为手册使用. 30 多种可视化图表的详细介绍 规范中总结了常用的 30 多种图表的特性(不断增加).每篇图表介绍中包括:基本介绍,图表起源,图表的构成,图表的应用场景,错误的使用场景,该图表的扩展及该

在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的axes中添加 label项 axes: [ { ....\\y轴 }, { type: 'Category', position: 'bottom', fields: ['name'], label: { rotate: { degrees: 315} }, title: 'x轴' } ] //la