zoukankan      html  css  js  c++  java
  • G2 绘制混合图例 demo

    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();
  • 相关阅读:
    Linux下运行当前目录需要加./的原因
    Linux mint界面过小无法安装(解决方法)
    哈工大机考:数组逆置
    哈工大机考:字符串内排序
    哈工大机考:求最大值
    八皇后问题的简单分析
    哈工大机考:字符串去特定字符
    哈工大机考:计算两个矩阵的乘积
    iOS 字号转换问题
    iOS 十六进制的颜色值转换为UIColor
  • 原文地址:https://www.cnblogs.com/hill-foryou/p/10571348.html
Copyright © 2011-2022 走看看