语法
Plugins
概述
主要介绍 G2 的插件的使用方法。目前 G2 提供了滑动条插件:
- G2.Plugin.range
- 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>