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 ...

随机推荐

oracle数据库ID自增长--序列
什么是序列?在mysql中有一个主键自动增长的id,例如:uid number primary key auto_increment;在oracle中序列就是类似于主键自动增长,两者功能是一样的,只是 ...
gradle上sourceSets配置&同名文件合并问题
gradle的sourceSets可以对不同的buildType, productFlavor,buildVariant设置不同的文件路径,进行多样化处理. sourceSets{ main{ man ...
iOS APP 国际化
pp Store 中很多流行的应用程序有多种语言版本.虽然这些应用程序可能因为很多因素而变得流行,但是具有多种本地化版本,肯定是其中一个因素.越多的人可以理解并使用您的应用程序,潜在的买家也就越多. ...
MOVE - 重定位一个游标
SYNOPSIS MOVE [ direction { FROM | IN } ] cursorname DESCRIPTION 描述 MOVE 在不检索数据的情况下重新定位一个游标. MOVE AL ...
利用mysql中if函数排序
格式:IF(Condition,A,B) 意义:当Condition为TRUE时,返回A:当Condition为FALSE时,返回B. 作用:作为条件语句使用. select if(`from_use ...
MongoDB入门_相关网站
几个重要的网站 1.MongoDB官网:https://www.mongodb.org 2.MongoDB的国内官网https://www.mongoing.com 3.MongoDB的中文文档htt ...
libevent cs
int evutil_make_listen_socket_reuseable(evutil_socket_t sock): 相当于执行以下操作 int one = 1; setsockopt(soc ...
C#的Class的几个修饰符
none or internal 类只能在当前的工程中访问 Public 类可以在任何地方访问 abstract or internal abstract ...
Azure Messaging
上篇博文中我们介绍了Azure ServiceBus Messaging的消息事务机制: Azure Messaging-ServiceBus Messaging消息队列技术系列7-消息事务(2017 ...
vscode-函数注释插件-正则插件
1.安装插件KoroFileHeader(函数标准注释) 2.设置在vscode左下角点击设置按钮,选择“设置”,然后输入“fileheader”, 文件头部注释:Fileheader:custom ...

G2 基本使用 折线图 柱状图 饼图 基本配置

G2 基本使用 折线图 柱状图 饼图 基本配置的更多相关文章

随机推荐

热门专题

G2 基本使用折线图柱状图饼图基本配置

G2 基本使用折线图柱状图饼图基本配置的更多相关文章