antV使用教程入门

在移动端使用antV F2图表入门介绍
1.通过npm安装

npm install @antv/f2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

const F2 = require('@antv/f2');

2.通过引用在线js

<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

我是通过引用在线js搭配js和vue.js使用antV F2

以柱状图为例，首先我们需要创建一个canvas，然后进行图表绘制

<canvas id="myChart" width:"400" height="260"></canvas>

a).首先准备好数据源，json数组

data:[{ genre: '测试数据一', sold: 100},{ genre: '测试数据二', sold: 200 },{ genre: '测试数据三', sold: 300 },{ genre: '测试数据四', sold: 400 },{ genre: '测试数据五', sold: 500 },
];

b).创建 Chart 对象

const chart = new F2.Chart({id: 'myChart',pixelRatio: window.devicePixelRatio, // 指定分辨率
});

c).载入数据源

chart.source(this.data);

d).创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴

chart.interval().position('genre*sold').color('genre');

e).渲染图表

chart.render();

antV使用教程入门相关推荐

【python教程入门学习】Python实现自动玩贪吃蛇程序
这篇文章主要介绍了通过Python实现的简易的自动玩贪吃蛇游戏的小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学一学实现效果先看看效果这比我手动的快多了,而且是单机的,自动玩没惹 ...
【helloworld】-微信小程序开发教程-入门篇【1】
1. 开篇导言本节目标:旨在演示如何用开发者工具构建并运行简单的 helloworld 应用. 目标用户:无编程经验,但对微信小程序感兴趣的同学. 学习目标:开发者工具的基本使用流程,即创建.导入. ...
wxpython使用实例_wxPython中文教程入门实例
wxPython中文教程入门实例 wx.Window 是一个基类,许多构件从它继承.包括 wx.Frame 构件. 可以在所有的子类中使用 wx.Window 的方法. wxPython的几种方法: ...
Vue-cli3配置教程入门
Vue-cli3配置教程入门 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcem ...
【python教程入门学习】普通人学python有意义吗
普通人学python有意义吗?普通人能不能学习python语言,难不难,是否容易上手,学了python能做那些事情,能挣多少钱?这些问题是很多同学关心的问题,今天python教程入门学习就从小白同学的 ...
【python教程入门学习】学python要多久,0基础学python有多难
学python要多久,0基础学python有多难,这是很多想学习python语言同学绕不开的问题,都害怕花完钱最终没有应有的回报!对于毫无经验0基础的同学来说学习python什么最重要,方向选对坚持下 ...
jQuery LigerUI 使用教程入门篇
jQuery LigerUI 使用教程入门篇阅读目录获取最新代码 ligerUI是什么如何使用如何扩展获取最新代码可以到http://ligerui.googlecode.com下载最新代 ...
hazelcast 搭建_hazelcast教程入门
hazelcast教程-入门最近一直在研究hazelcast,被hazelcast简单的API操作和丰富的功能所震撼,但是困于中文文档的匮乏,所以想要编写一些关于hazelcast的一些教程文档,想 ...
【python教程入门学习】第一个Pygame程序
Pygame 作为一个入门级的游戏开发库,其实并不难学,只要掌握 Python 编程的相关知识就能很轻松地掌握它. Pygame 语法简单.明了,秉持了 Python 语言一贯的风格.同时,它作为一个 ...

antV使用教程入门

antV使用教程入门相关推荐

最新文章

热门文章