G2 绘制混合图例 demo

import G2 from '@antv/g2';
import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
{ label: '0.1', 放款应还本金: 2800, 价格: 2800, 收益: 2260, 总收益率: 2 },
{ label: '0.2', 放款应还本金: 1800, 价格: 1800, 收益: 1300, 总收益率: 3 },
{ label: '0.3', 放款应还本金: 950, 价格: 950, 收益: 900, 总收益率: 5 },
{ label: '0.4', 放款应还本金: 500, 价格: 500, 收益: -390, 总收益率: 1 },
{ label: '0.5', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.6', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.7', 放款应还本金: 170, 价格: 170, 收益: -100, 总收益率: 3 },
{ label: '0.8', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '0.9', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '1.0', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
{ label: '未评分', 放款应还本金: 170, 价格: 170, 收益: 100, 总收益率: 3 },
];
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'fold',
fields: ['放款应还本金', '价格', '收益'], // 展开字段集
key: 'type', // key字段
value: 'value', // value字段
})
const dv1 = ds.createView().source(data);
dv1.transform({ // 附加一个字段类型
type: 'map',
callback(row) { // 加工数据后返回新的一行,默认返回行数据本身
row.rateType = 'a';
return row;
}
});
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: 'mountNode', // 指定图表容器 ID
height: 300, // 指定图表高度
forceFit: true,
animate: false
});
chart.legend({
allowAllCanceled: true
})
const view1 = chart.view();
view1.source(dv); // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
view1.interval()
.position('label*value')
.color('type', ['#2b6cbb','#41a2fc','#54ca76'])
.label('value')
.adjust('dodge'); const view2= chart.view();
view2.axis('总收益率', {
position: 'right',
grid: null
});
view2.source(dv1);
view2.line().position('label*总收益率').color('rateType', '#fad248').label('总收益率'); // Step 4: 渲染图表
chart.render();

G2 绘制混合图例 demo的更多相关文章

  1. G2( bizCharts ) React 绘制混合图例

    G2( bizCharts ) React 绘制混合图例, // data-set 可以按需引入,除此之外不要引入别的包 import React from 'react'; import { Cha ...

  2. 【Qt编程】基于QWT的曲线绘制及图例显示操作

    在<QWT在QtCreator中的安装与使用>一文中,我们完成了QWT的安装,这篇文章我们讲讲基础曲线的绘制功能. 首先,我们新建一个Qt应用程序,然后一路默认即可.这时,你会发现总共有: ...

  3. 【Qt编程】基于QWT的曲线绘制及图例显示操作——有样点的实现功能

    在<QWT在QtCreator中的安装与使用>一文中,我们完成了QWT的安装,这篇文章我们讲讲基础曲线的绘制功能. 首先,我们新建一个Qt应用程序,然后一路默认即可.这时,你会发现总共有: ...

  4. 使用matplotlib绘制带图例的图表

    #coding=utf8 from pylab import * plt.figure(figsize=(8,10), dpi=50) plt.plot(do_tow2[28:508],do_prn2 ...

  5. 一个highcharts混合图Demo

    公司要我做一个highcharts的mockup,其实半个小时就能做完了,我做了将近两个小时,唉!不过还好,总算把东西学会了.勤能补拙! 把代码贴上来 布局很简单,一个div里套两个div,给好id, ...

  6. 蚂蚁金服新一代数据可视化引擎 G2

    新公司已经呆了一个多月,目前着手一个数据可视化的项目,数据可视化肯定要用到图形库如D3.Highcharts.ECharts.Chart等,经决定我的这个项目用阿里旗下蚂蚁金服所开发的G2图表库. 官 ...

  7. qml demo分析(maskedmousearea-异形窗口)

    一.效果展示 如本文的标题所示,这篇文章分析的demo是一个异形窗口,主要展示鼠标在和异形区域交互的使用,效果如图1所示,当鼠标移动到白云或者月亮上时,相应的物体会高亮,当鼠标按下时,物体会有一个放大 ...

  8. Day3 AntV/G2图表的组成

    简介 为了更好的使用G2进行数据可视化,我们需要先了解G2图表的组成及其相关概念. 完整的G2图表组成如下图所示:可以看出图表主要由axes(坐标轴axis的复数),tooltip(提示信息),gui ...

  9. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十章:混合

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十章:混合 代码工程地址: https://github.com/j ...

随机推荐

  1. openLDAP环境搭建

    OpenLDAP搭建   PS:本次实验是基于centos7,OpenLDAP使用2.4.44版本. 一.初始化环境 1.初始化环境 命令如下: ntpdate -u ntp.api.bz & ...

  2. Golang 容器和不同header的解析

    记录一下,用golang实现一个静态资源容器,膜拜下强人 http.Handle("/", http.FileServer(http.Dir(currentPath+"/ ...

  3. 数据结构与算法之PHP排序算法(堆排序)

    一.堆的定义 堆通常是一个可以被看做一棵树的数组对象,其任一非叶节点满足以下性质: 1)堆中某个节点的值总是不大于或不小于其父节点的值: 每个节点的值都大于或等于其左右子节点的值,称为大顶堆.即:ar ...

  4. vue-router beforeEach死循环

    vue中页面跳墙处理 页面跳墙中使用 vue-router中的 beforeEach的死循环问题 问题展现 import Router from 'vue-router' const router = ...

  5. Eclipse+Maven+Scala Project+Spark | 编译并打包wordcount程序

    学习用Eclipse+Maven来构建并打包一个简单的单词统计的例程. 本项目源码已托管于Github –>[Spark-wordcount] 第一步 在EclipseIDE中安装Scala插件 ...

  6. CUDA编程常见问题 转

    http://blog.csdn.net/yutianzuijin/article/details/8147912 分类: 编程语言2012-11-05 10:55 2521人阅读 评论(0) 收藏  ...

  7. VMware与Centos系统安装、重置root密码

    VMware与Centos系统安装   今日任务 .Linux发行版的选择 .vmware创建一个虚拟机(centos) .安装配置centos7 .xshell配置连接虚拟机(centos) 选择性 ...

  8. nginx 支持的命令行参数

    Command-line parameters 命令行参数 nginx supports the following command-line parameters: nginx支持以下命令行参数 - ...

  9. LAMP架构(三)

    第十九课 LAMP架构(三) 目录 一.配置防盗链 二.访问控制Directory 三.访问控制FilesMatch 四.限定某个目录禁止解析php 五.限制user_agent 六.php相关配置 ...

  10. mybatis xml配置文件模版

    mybatis xml配置文件模版 1.mybatis核心配置文件书写(SqlMapConfig.xml) <?xml version="1.0" encoding=&quo ...