@antv/chart-node-g6
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    @antv/chart-node-g6

    自定义 G6 图表节点的工具包。

    在一些复杂的场景中,需要的节点类型也比较复杂,如在节点中展示某类数据的分布、趋势等,就像下面的节点:

    为了方便用户在使用 G6 自定义节点时支持统计图表,我们基于 G2 封装了 @antv/chart-node-g6 工具包,该工具包支持将 G6.registerNode / G6.registerEdge / G6.registerCombo 方法中的第二个参数 group 作为容器。除过不支持交互外,其他使用方式基本和 G2 的用法完全一致。

    自定义带有统计图表的节点

    定义上面节点的代码如下所示。

    import G6 from '@antv/g6'
    import Chart from '@antv/chart-node-g6'
    
    G6.registerNode('node-with-interval', {
      draw(cfg, group) {
        const keyShape = group.addShape('rect', {
          attrs: {
            x: 0,
            y: 0,
            width: 400,
            height: 200,
            fill: cfg.style.fill
          }
        })
    
        group.addShape('rect', {
          attrs: {
            x: 0,
            y: 0,
            width: 400,
            height: 40,
            fill: '#69c0ff'
          }
        })
    
        group.addShape('text', {
          attrs: {
            text: '浏览申请完成率',
            x: 10, 
            y:25,
            fontSize: 14,
            fill: '#fff' 
          }
        })
    
        group.addShape('text', {
          attrs: {
            text: '2020-06-07 ~ 2020-06-14 | 均值',
            x: 20,
            y: 70,
            fontSize: 13,
            fill: '#8c8c8c'
          }
        })
    
        group.addShape('text', {
          attrs: {
            text: '8.8%',
            x: 20,
            y: 110,
            fontSize: 30,
            fill: '#000'
          }
        })
    
        // 统计图表部分
        const view = new Chart({
          group,
          region: {
            start: {
              x: 0.01,
              y: 0.2
            },
            end: {
              x: 0.8,
              y: 0.35
            }
          },
        })
        
        
        view.data(cfg.trendData);
        
        view
          .interval()
          .position("genre*sold")
          .color("genre");
        
        view.legend("genre", false);
        
        view.scale({
          genre: {
            alias: "游戏种类" // 列定义,定义该属性显示的别名
          },
          sold: {
            alias: "销售量"
          }
        });
    
        view.axis('sold', false)
        
        view.render();
    
        keyShape.set('intervalView', view)
    
        return keyShape
      },
      update(cfg, item) {
        const keyShape = item.getKeyShape()
        const view = keyShape.get('intervalView')
        view.changeData(cfg.trendData)
      }
    }, 'single-node')
    

    Install

    npm i @antv/chart-node-g6

    DownloadsWeekly Downloads

    26

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    3.64 MB

    Total Files

    13

    Last publish

    Collaborators

    • iaaron
    • wjgogogo
    • yangzhanmei
    • jinke.li
    • susan_ann
    • yard
    • intchous
    • soundquiet
    • lviser
    • freestyle21
    • serializedowen
    • sturuby
    • xdzhao
    • elaine.q.10
    • sakuya223
    • leungwensen
    • dori
    • simaq
    • dxq613
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn