语法

Plugins

概述

主要介绍 G2 的插件的使用方法。目前 G2 提供了滑动条插件：

  1. G2.Plugin.range
  2. G2.Plugin.slider，该插件的使用详见教程：新数据滑动条插件

语法

G2.Plugin.range

用于范围的选择插件，尤其适用于大数据量的图表绘制，可以对不同的数据范围进行选择。

range 使用步骤

引入插件脚本和插件的样式

<!-- 引入插件的 css 样式 -->
<link rel="stylesheet" type="text/css" href="https://os.alipayobjects.com/rmsportal/UBXCMkzNVlaZYNs.css">
<!-- 引入插件脚本 -->
<script src="https://as.alipayobjects.com/g/datavis/g-plugin-range/0.0.9/index.js"></script>

创建 DOM 容器

然后还需要创建一个展示 range 插件的 DOM 容器，如：

<div id="range"></div>

创建对象并渲染

var range = new G2.Plugin.range({
  id: "range", // DOM id
  width: 840, // 插件的宽度
  height: 26, // 插件的高度
  dim: 'time', // 指定筛选的数据维度
  start: 9293819091, // 起始原始数据
  end: 8293819091, // 结束原始数据
});

range.source(frame); // 载入数据源
range.link([chart, chart1]); // 关联 G2 图表对象，支持一个或者多个 chart 对象
range.render(); // 渲染，将 chart 和 range 插件一起渲染

示例

股票图 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>股票图</title>
  <link rel="stylesheet" type="text/css" href="https://os.alipayobjects.com/rmsportal/UBXCMkzNVlaZYNs.css">
  <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
  <!-- 该脚本只是网站用于请求数据用的，请不要复制 -->

  <!-- 载入 G2 脚本 -->
  <script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
  <!-- 载入 g-plugin-range 脚本 -->
  <script src="https://as.alipayobjects.com/g/datavis/g-plugin-range/0.0.9/index.js"></script>
  <style>
  #c1 {
    position: relative;
  }
  #range {
    margin: 5px 80px;
  }
  .crossLine{
    border-left: 1px solid #999;
    position: absolute;
    display: none;
    top: 20px;
  }
  </style>
</head>
<body>
  <div id="c1"></div>
  <div id="range"></div>
  <script>
  $.getJSON('../static/data/candleSticks.json',function(data){
    var Stat = G2.Stat;
    var chart = new G2.Chart({
      id: 'c1',
      width: 800,
      height: 360,
      plotCfg: {
        margin: [20, 80, 30, 80]
      }
    });
    // g-plugin-range 只支持数值类型的数据排序，所以将时间统一转换为时间戳
    for(var i=0;i<data.length;i++) {
      var item = data[i];
      var time = item.time;
      item.time = new Date(time).getTime();
    }

    // 创建数据源
    var Frame = G2.Frame;
    var frame = new Frame(data);
    frame.addCol('range', function(obj){
      return [obj.start, obj.end, obj.max, obj.min]; // 添加列，顺序为 开盘价 收盘价 最高价 最低价
    });
    frame.addCol('trend', function(obj) {
      return (obj.start <= obj.end) ? 0 : 1;
    });

    chart.source(frame, {
      'trend': {
        type: 'cat',
        alias: '趋势',
        values: ['上涨','下跌']
      },
      'time': {
        type: 'timeCat',
        nice: false,
        mask: 'mm-dd',
        alias: '时间',
        tickCount: 10
      },
      'range':{
        type: 'linear',
        alias: '指数'
      },
      'start': {alias: '开盘价'},
      'end': {alias: '收盘价'},
      'max': {alias: '最高价'},
      'min': {alias: '最低价'}
    });
    chart.axis('time', {
      title: null
    });
    chart.schema().position('time*range').color('trend', ['#C00000','#19B24B']).shape('candle').tooltip('start*end*max*min');

    var range = new G2.Plugin.range({
      id: "range", //DOM id
      width: 640,
      height: 26,
      dim: 'time'
    });

    range.source(frame);
    range.link(chart);
    range.render();
  });
  </script>
</body>
</html>
Theme Plugins