Antv | 蚂蚁数据可视化API应用
HTML5 图表API应用学习
- 1. 浏览器中使用方法
- 2. 项目中使用方法
G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics),同时也致敬了 ggplot2。
应用图表可以让我们在前端开发中页面更加丰富多彩,可以帮助我们更加直观地展现数据,是前端工程师的必备技能之一。
1. 浏览器中使用方法
- 安装
既可以通过将脚本下载到本地也可以直接引入在线资源。
<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>// 获取到图表的构造函数//方法1:const { Line } = G2Plot;//方法2:var Line = G2Plot.Line
</script>
通过npm 安装
打开网页所在的终端
// 推荐用法
npm install @antv/g2plot --save
成功安装完成之后,即可使用 import进行引用:
import { Line } from '@antv/g2plot';
- 创建一个图表容器
<div id="container"></div>
- 提供图表数据
const data = [{ year: '1991', value: 3 },{ year: '1992', value: 4 },{ year: '1993', value: 3.5 },{ year: '1994', value: 5 },{ year: '1995', value: 4.9 },{ year: '1996', value: 6 },{ year: '1997', value: 7 },{ year: '1998', value: 9 },{ year: '1999', value: 13 },]
- 创建图表实例通过图表构造函数
const line = new Line('container',{data,xField:'year',yField:'value',color:"#000000",xAxis:{top:true}// 设置多色// color: ['#d62728', '#2ca02c', '#000000'],})line.render();
页面效果:
- 浏览器使用案例完整代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 安装 引入antv --><script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script><!-- <script src="https://unpkg.com/@antv/xflow/dist/index.umd.js"></script> -->
</head><body><!-- 2.图表容器 容纳图表--><div id="container" style="height: 500px;"></div><script>console.log(G2Plot, '111');// 2.1获取到图表的构造函数var Line = G2Plot.Line// 2.2 提供图表数据const data = [{ year: '1991', value: 3 },{ year: '1992', value: 4 },{ year: '1993', value: 3.5 },{ year: '1994', value: 5 },{ year: '1995', value: 4.9 },{ year: '1996', value: 6 },{ year: '1997', value: 7 },{ year: '1998', value: 9 },{ year: '1999', value: 13 },]// 3. 创建图表实例通过图表构造函数// 参数 图表容器id 图表配置项const line = new Line('container',{data,xField:'year',yField:'value',color:"#000000",xAxis:{top:true}// 设置多色// color: ['#d62728', '#2ca02c', '#000000'],})line.render();</script>
</body></html>
2. 项目中使用方法
- 引入
- 创建图表容器
<div ref="container" style="height:95%">
- 引入图表构造函数
根据每个图表的具体javascript引入
import { Line } from '@antv/g2plot';
4. 封装图表方法
//方法名(随便起一个)
loadCharts(){const data = [{Date: "2016-04",scales: 680,},{Date: "2016-05",scales: 802,},{Date: "2016-06",scales: 697,},{Date: "2016-07",scales: 583,},{Date: "2016-08",scales: 456,},{Date: "2016-09",scales: 524,},{Date: "2016-10",scales: 398,},{Date: "2016-11",scales: 278,},{Date: "2016-12",scales: 195,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2016-12",scales: 195,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},];const line = new Line(this.$refs['container'], {data,padding: 'auto',xField: 'Date',yField: 'scales',xAxis: {// type: 'timeCat',tickCount: 5,},yAxis: {// type: 'timeCat',tickCount: 8,},//更改提示框样式tooltip:{fields:['Date','scales'],domStyles:{"g2-tooltip":{background:'purple',color:'#fff'}}}});line.render();}
- 在生命周期中(钩子函数),挂载dom节点
mounted(){this.loadCharts()}
- 项目中 图表应用的完整代码:
<template><!-- 图表容器 --><div ref="container" style="height:95%"></div>
</template>
<script>
//引入图表构造函数
import { Line } from '@antv/g2plot';
export default {data(){return{}},methods: {//封装图表方法loadCharts(){const data = [{Date: "2016-04",scales: 680,},{Date: "2016-05",scales: 802,},{Date: "2016-06",scales: 697,},{Date: "2016-07",scales: 583,},{Date: "2016-08",scales: 456,},{Date: "2016-09",scales: 524,},{Date: "2016-10",scales: 398,},{Date: "2016-11",scales: 278,},{Date: "2016-12",scales: 195,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2016-12",scales: 195,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},{Date: "2017-01",scales: 145,},{Date: "2017-02",scales: 207,},];const line = new Line(this.$refs['container'], {data,padding: 'auto',xField: 'Date',yField: 'scales',xAxis: {// type: 'timeCat',tickCount: 5,},yAxis: {// type: 'timeCat',tickCount: 8,},//更改提示框样式tooltip:{fields:['Date','scales'],domStyles:{"g2-tooltip":{background:'purple',color:'#fff'}}}});line.render();}},// 生命周期 钩子函数 dom挂载到页面mounted(){this.loadCharts()}
}
</script>
页面效果:
Antv | 蚂蚁数据可视化API应用相关推荐
- AntV | 蚂蚁数据可视化 G2Plot 快速入门
AntV | G2Plot API AntV | G2Plot 教程 1.开始 <1> 简介 G2Plot 是一套简单.易用.并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建 ...
- 仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图(包含买卖点、自定义标签等,注释详尽)
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,包含买卖点.自定义标签等,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/exampl ...
- 仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图(注释详尽)
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/bar/basic# ...
- 仿蚂蚁金服AntV框架蚂蚁数据可视化F2饼图(注释详尽)
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/examples/pie/donut# ...
- 仿蚂蚁基金效果AntV的蚂蚁数据可视化F2折线图、买卖点和自定义标签(注释详尽)
大家好,这次使用的是AntV的蚂蚁数据可视化F2框架,类似于蚂蚁基金的效果,包含买卖点.自定义标签等,代码如下: F2框架参考网址:https://antv-f2.gitee.io/zh/exampl ...
- java弧线_数据可视化API之弧线图实现
前言 数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
- 人口热力图java_数据可视化API之热力图实现
前言 数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
- 数据可视化API之轨迹图实现
前言 数据可视化API(Web),是基于腾讯位置服务JavaScript API GL实现的专业地理空间数据可视化渲染引擎. 通过这套API,可以实现轨迹数据.坐标点数据.热力.迁徙.航线等空间数据的 ...
- 高德地图Loca 数据可视化 API 2.0的用法
1.安装 npm i @amap/amap-jsapi-loader --save 2.使用 <template> <div id="Sharingrouter" ...
最新文章
- Android 7.0 WifiMonitor工作流程分析
- angularjs源码笔记(3)--injector
- Lua 函数、闭包、尾调用总结
- android 获取权限管理,Android常用权限获取和设置
- 【机器学习】集成学习之stacking
- Groovy里使用CountDownLatch
- C++ 递归算法解析(演示语言:c++/c#/python/lua)(用博主会的所有语言来演示一波)
- 各种VS Code的学习秘诀,全是这六条法则撑起的!
- MyBatis中association,collection多表查询(resultMap高级映射)笔录
- Origin 去demo水印
- 【PS】怎么让一张模糊图片更清晰?
- Python保留字简单释义
- 讯飞离线语音合成(语记)
- vue项目为什么选择svg图标
- [生存志] 第130节 司马著史记
- python遥控汽车玩具_ESP32MicroPython 手机遥控小车
- ios 按钮点击无反应
- knowledge-based systems 终于返回了意见——小修
- 【计量经济学】联立方程模型
- java版溺尸掉三叉戟吗_我的世界:这个版本的溺尸不会手持三叉戟?难怪有人说这么少见!...
热门文章
- go测试之Convey+monkey+coverage组合
- 植物大战僵尸创始人自述:从0到1亿
- mysql用户连接次数失败限制_mysql数据库限制多次登录失败,限定用户重试时间...
- Excel导入数据下载模板示例
- python的文本编辑器atom_Python开发工具Atom
- mac怎么关闭自启动项
- poj1011 stick 强力搜索剪枝
- 万众达机械携手中企动力制霸高空作业平台市场
- Centos7(3.10.0内核)编译rtl8192EU WiFi driver v5.6.3.1出现 error: ‘IEEE80211_NUM_BANDS’ undeclared here修改方案
- 班级纪念册php源码,班级纪念册制作寄语,高中毕业纪念册文字分享