G2 基本使用 折线图 柱状图 饼图 基本配置
G2的基本使用
1.浏览器引入 <!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
2.通过 npm 安装 npm install @antv/g2 --save
3.创建 div 图表容器 <div id="c1"></div>
4. 编写图表绘制代码
(1)创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
(2)载入图表数据源；
(3)使用图形语法进行图表的绘制；
(4)渲染图表。(这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在 </body> 之前）)
5示例：
（1）折线图(单线)
<body>
<div id="appearance"></div>
<script>
var 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}];
var chart = new G2.Chart({
container: 'appearance', // 指定 图表容器ID
forceFit: true, // 是否自动缩放
height: 500, // 图表的高度
});
chart.source(data); // 载入数据源
chart.scale('value', { // 度量
min: 0 // Y轴显示的最小值
});
chart.scale('year', { // 度量
range: [0, 1] // 数值范围区间
});
chart.tooltip({ // 提示信息
crosshairs: {
type: 'line' // 提示信息类型
}
});
chart.line().position('year*value'); // 几何标记类型 线， position:二维坐标系内设至 x轴 y轴
chart.point().position('year*value').size(4).shape('circle').style({ // 几何标记类型 点， 二维坐标系内设置 x轴 y轴 大小 图形形状
stroke: '#fff',
lineWidth: 1
});
chart.render(); // 渲染
</script>
</body>
（2）折线图(双线)
<div id="appearance"></div>
<script>
// 在一行中保存多个城市的数据，需要将数据转换成
// {month: 'Jan', city: 'Tokyo', temperature: 3.9}
var data = [{month: 'Jan', Tokyo: 7.0, London: 3.9}, {month: 'Feb', Tokyo: 6.9, London: 4.2}, {
month: 'Mar', Tokyo: 9.5, London: 5.7}, {month: 'Apr', Tokyo: 14.5, London: 8.5}, {month: 'May',
Tokyo: 18.4, London: 11.9}, {month: 'Jun', Tokyo: 21.5, London: 15.2}, {month: 'Jul', Tokyo: 25.2,
London: 17.0}, {month: 'Aug', Tokyo: 26.5, London: 16.6}, {month: 'Sep', Tokyo: 23.3, London: 14.2
}, {month: 'Oct', Tokyo: 18.3, London: 10.3}, {month: 'Nov', Tokyo: 13.9, London: 6.6}, {month: 'Dec',
Tokyo: 9.6, London: 4.8}];
var ds = new DataSet(); // 创建DataSet 对象
var dv = ds.createView().source(data);// 创建数据实例
// fold 方式完成了行列转换，如果不想使用 DataSet 直接手工转换数据即可
dv.transform({
type: 'fold',
fields: ['Tokyo', 'London'], // 展开字段集
key: 'city', // key字段
value: 'temperature' // value字段
});
var chart = new G2.Chart({
container: 'appearance',
forceFit: true,
height: 500
});
chart.source(dv, {
month: {
range: [0, 1]
}
});
chart.tooltip({
crosshairs: {
type: 'line'
}
});
chart.axis('temperature', {
label: {
formatter: function formatter(val) { // 格式化
return val + '°C';
}
}
});
chart.line().position('month*temperature').color('city').shape('smooth');
chart.point().position('month*temperature').color('city').size(4).shape('circle').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
</script>
（3）折线图(多线)
<script>
var data = [{date: '2018/8/1', type: 'download', value: 4623}, {date: '2018/8/1', type: 'register', value: 2208}, {
date: '2018/8/1', type: 'bill', value: 182}, {date: '2018/8/2', type: 'download', value: 6145}, {date: '2018/8/2',
type: 'register', value: 2016}, {date: '2018/8/2', type: 'bill', value: 257}, {date: '2018/8/3', type: 'download',
value: 508}, {date: '2018/8/3', type: 'register', value: 2916}, {date: '2018/8/3', type: 'bill', value: 289}, {
date: '2018/8/4', type: 'download', value: 6268}, {date: '2018/8/4', type: 'register', value: 4512}, {date: '2018/8/4',
type: 'bill', value: 428}, {date: '2018/8/5', type: 'download', value: 6411}, {date: '2018/8/5', type: 'register',
value: 8281}, {date: '2018/8/5', type: 'bill', value: 619}, {date: '2018/8/6', type: 'download', value: 1890}, {
date: '2018/8/6', type: 'register', value: 2008}, {date: '2018/8/6', type: 'bill', value: 87}, {date: '2018/8/7',
type: 'download', value: 4251}, {date: '2018/8/7', type: 'register', value: 1963}, {date: '2018/8/7', type: 'bill',
value: 706}, {date: '2018/8/8', type: 'download', value: 2978}, {date: '2018/8/8', type: 'register', value: 2367}, {
date: '2018/8/8', type: 'bill', value: 387}, {date: '2018/8/9', type: 'download', value: 3880}, {date: '2018/8/9',
type: 'register', value: 2956}, {date: '2018/8/9', type: 'bill', value: 488}, {date: '2018/8/10', type: 'download',
value: 3606}, {date: '2018/8/10', type: 'register', value: 678}, {date: '2018/8/10', type: 'bill', value: 507}, {
date: '2018/8/11', type: 'download', value: 4311}, {date: '2018/8/11', type: 'register', value: 3188}, {date: '2018/8/11',
type: 'bill', value: 548}, {date: '2018/8/12', type: 'download', value: 4116}, {date: '2018/8/12', type: 'register',
value: 3491}, {date: '2018/8/12', type: 'bill', value: 456}, {date: '2018/8/13', type: 'download', value: 6419}, {
date: '2018/8/13', type: 'register', value: 2852}, {date: '2018/8/13', type: 'bill', value: 689}, {date: '2018/8/14',
type: 'download', value: 1643}, {date: '2018/8/14', type: 'register', value: 4788}, {date: '2018/8/14', type: 'bill',
value: 280}, {date: '2018/8/15', type: 'download', value: 445}, {date: '2018/8/15', type: 'register', value: 4319}, {
date: '2018/8/15', type: 'bill', value: 176}];
var chart = new G2.Chart({
container: 'appearance',
forceFit: true,
height: 500,
padding: [100, 20, 30, 45] // 上右下左
});
chart.source(data);
chart.tooltip({// 提示信息
follow: true,
crosshairs: 'y',
});
chart.source(data, {
'date': {// 显示的条数
tickCount: 15
}
});
chart.axis('date', {// 坐标轴
label: {
textStyle: {
fill: '#aaaaaa'
}
}
});
chart.axis('value', {
label: {
textStyle: {
fill: '#aaaaaa'
},
formatter: function formatter(text) {// 格式化参数值
return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
}
});
chart.legend(false);// 图例禁用
chart.line().position('date*value').color('type');
chart.render();
</script>
（4）基础柱状图
<div id="appearance"></div>
<script>
var data = [{year: '1951 年', sales: 38}, {year: '1952 年', sales: 52}, {year: '1956 年',
sales: 61}, {year: '1957 年', sales: 145}, {year: '1958 年', sales: 48}, {year: '1959 年',
sales: 38}, {year: '1960 年', sales: 38}, {year: '1962 年', sales: 38}];
var chart = new G2.Chart({
container: 'appearance',
forceFit: true,
height: window.innerHeight
});
chart.source(data);
chart.scale('sales', {
tickInterval: 20 // 用于指定坐标轴各个标度点的距离
});
chart.interval().position('year*sales');
chart.render();
</script>
G2 基本使用 折线图 柱状图 饼图 基本配置的更多相关文章
- 百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- OpenGL——折线图柱状图饼图绘制
折线图绘制代码: #include<iostream> //旧版本 固定管线 #include<Windows.h> #include <GL/glut.h> // ...
- 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图
折线图: package org.achartengine.chartdemo.demo.chart; import java.util.ArrayList; import java.util.Lis ...
- JavaScript数据可视化编程学习（一）Flotr2，包含简单的，柱状图，折线图，饼图，散点图
一.基础柱状图 二.基础的折线图 三.基础的饼图 四.基础的散点图 一.基础柱状图 如果你还没有想好你的数据用什么类型的图表来展示你的数据,你应该首先考虑是否可以做成柱状图.柱状图可以表示数据的变化过 ...
- HighCharts之2D柱状图、折线图和饼图的组合图
HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...
- 数据可视化（Echart） ：柱状图、折线图、饼图等六种基本图表的特点及适用场合
数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...
- ChartControl 折线图 柱状图
添加折线图(柱状图) 拖动ChartControl到Form上 在Series Collection中添加Line(或Bar) DevExpress.XtraCharts.Series series1 ...
- 利用pandas读取Excel表格，用matplotlib.pyplot绘制直方图、折线图、饼图
利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import pandas as pdimport matplotlib. ...
- v-charts 绘制柱状图、条形图、水球图、雷达图、折线图+柱状图，附官网地址
v-charts 官网地址:https://v-charts.js.org/#/ 柱状图: <template> <ve-histogram :data="chartDat ...
随机推荐
- 2019长安大学ACM校赛网络同步赛 B Trial of Devil （递归）
链接:https://ac.nowcoder.com/acm/contest/897/B来源:牛客网 Trial of Devil 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32 ...
- Revolver Maps-3D地球仪网站定制
这是个网站统计的小插件,大家可以看到那些国家,哪些城市对本网站进行了访问,很直观的一种表现方式. 这个小插件不需要你写任何代码,只需要去它官方网站定制你自己需要的代码.它的地址是:http://www ...
- 算法竞赛进阶指南 0x00 基本算法
放在原来这个地方不太方便,影响阅读体验.为了读者能更好的刷题,另起一篇随笔. 0x00 基本算法 0x01 位运算 [题目][64位整数乘法] 知识点:快速幂思想的灵活运用 [题目][最短Hamilt ...
- java并发学习--第十章 java内存模型的内存语义
一.锁的内存语义 所为的java内存模型的内存语义指的就是在JVM中的实现原则. 锁的内存语义:锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 我们把上面这句话再整理下: ...
- Django【第24篇】：JS实现的ajax和同源策略
JS实现的ajax和同源策略 一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器 ...
- Django【第22篇】：基于Ajax实现的登录
基于ajax实现的登录 一.需要知道的新知识点 1.刷新验证码.给src属性加一个?号.加个?会重新去请求 //#给验证码刷新 $(".vialdCode_img").click( ...
- AGC007题解
发现自己思维能力又跟不上了...做题有点吃力...所以回归AGC刷题计划... AGC040506都写了一部分题然后懒得补全了,所以从07开始做吧.大概是从C开始. C 这也太人类智慧了吧... 我先 ...
- 原生js禁止页面滚动
// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...
- 【leetcode】1175. Prime Arrangements
题目如下: Return the number of permutations of 1 to n so that prime numbers are at prime indices (1-inde ...
- el-select中显示图标/图片设置
<template> <el-select ref="select_icon" v-model="addModel.icon" @change ...