简介

Guide 作为 G2 图表的辅助元素，主要用于在图表上标识额外的标记注解。

image

guide 类型

G2 目前支持 6 种辅助标记类型：

  • 辅助线，例如表示平均值或者预期分布的直线；
  • 辅助图片，在图表上添加辅助图片；
  • 辅助文本，指定位置添加文本说明；
  • 辅助框，框选一段图区，设置背景、边框等；
  • 辅助标签(tag)，包含文本标识和辅助线的辅助标记，会从目标到说明文本之间绘制一条线；
  • 辅助 html，指定位置添加自定义html，显示自定义信息。

如何使用

辅助标记绘制过程中所需要的点都是一个数组[x, y]，其中

  • x：是 x 轴坐标对应字段的值，是原始数据值，而不是画布坐标。
  • y：是 y 轴坐标对应字段的值，是原始数据值，而不是画布坐标。

例如：['一月',20] ，[2.3,10000]

如果 x、y 值为分类类型的话，还支持直接传入索引值。

另外我们还提供了两个关键字： min max 用于表示对应字段的最大值和最小值，便于用户快速定位坐标轴的起点和终点。

下面列出了各个 guide 辅助标记的使用，更详细的配置项请参见 [Guide API]。

line 辅助线

  1. chart.guide().line(startPoint, endPoint[, cfg]);
参数说明
startPoint线的起点，是一个数组 [x, y]。
endPoint线的终点，是一个数组 [x, y]。
cfg线的配置信息，如线宽、颜色等。
  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var Stat = G2.Stat;
  3.   var frame = new G2.Frame(data);
  4.   var caratAvg = G2.Frame.mean(frame,'carat'); // 计算克拉数均值
  5.   var priceAvg = G2.Frame.mean(frame,'price'); // 计算价格均值
  6.   var chart = new G2.Chart({ // 创建图表
  7.     id : 'c1',
  8.     forceFit: true,
  9.     height: 300
  10.   });
  12.   chart.source(frame); // 设置数据源
  13.   chart.point().position('carat*price');
  14.   chart.guide().line([caratAvg,0],[caratAvg,20000]);
  15.   chart.guide().line([0,priceAvg],[4,priceAvg]);
  16.   chart.render(); // 图表渲染
  17. });

image 辅助图片

  1. chart.guide().image(startPoint[, endPoint], cfg);
参数说明
startPoint图片的起始位置
endPoint图片的终止位置，可选
cfg图片的配置项： src（图片路径）、width（宽度，可以不设置，如果设置了end，此属性无效）、height（ 高度，可以不设置，如果设置了end，此属性无效）
  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var Stat = G2.Stat;
  3.   var chart = new G2.Chart({
  4.     id: 'c2',
  5.     forceFit: true,
  6.     height: 300
  7.   });
  8.   chart.source(data);
  9.   chart.interval().position(Stat.summary.count(Stat.bin.rect('depth'))).shape('hollowRect');
  11.   chart.guide().image([55, 200], {
  12.     src: 'https://os.alipayobjects.com/rmsportal/IUYwZOlOpysCUsl.png',
  13.     width: 60,
  14.     height: 100
  15.   });
  16.   chart.render();
  17. });

text 辅助文本

  1. chart.guide().text(startPoint, text, [cfg]);
参数说明
startPoint文本显示位置，是一个数组 [x, y]
text辅助文本的显示内容
cfg文本的配置信息
  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var Stat = G2.Stat;
  3.   G2.Global.setTheme('cheery');
  4.   var colors = G2.Global.colors['default'];
  5.   var chart = new G2.Chart({ // 创建图表
  6.     id : 'c3',
  7.     forceFit: true,
  8.     height: 300,
  9.     plotCfg: {
  10.       margin: [20, 90, 60, 80]
  11.     }
  12.   });
  13.   var defs = {
  14.     'cut': {
  15.       type: 'cat',
  16.       values:['Ideal', 'Premium', 'Very-Good', 'Good', 'Fair']
  17.     }
  18.   };
  19.   chart.source(data, defs); // 设置数据源
  20.   chart.legend(false);
  21.   chart.pointJitter().position('cut*depth').color('cut');
  22.   chart.guide().text(['Ideal', 67], '越完美的钻石切割工艺集中', {
  23.     fill: colors[0],
  24.     textAlign: 'center',
  25.     fontSize: 14
  26.   });
  27.   chart.guide().text(['Fair', 63], '越差的钻石切割工艺分散', {
  28.     fill: colors[4],
  29.     textAlign: 'center',
  30.     fontSize: 14
  31.   });
  32.   chart.render(); // 图表渲染
  33. });

rect 辅助框

  1. chart.guide().rect(startPoint, endPoint, [cfg]);
参数说明
startPoint起始点位置
endPoint结束点位置
cfg矩形框的配置信息
  1. var data = [
  2.   {"month":0,"tem":7,"city":"tokyo"},
  3.   {"month":1,"tem":6.9,"city":"tokyo"},
  4.   {"month":2,"tem":9.5,"city":"tokyo"},
  5.   {"month":3,"tem":14.5,"city":"tokyo"},
  6.   {"month":4,"tem":18.2,"city":"tokyo"},
  7.   {"month":5,"tem":21.5,"city":"tokyo"},
  8.   {"month":6,"tem":25.2,"city":"tokyo"},
  9.   {"month":7,"tem":26.5,"city":"tokyo"},
  10.   {"month":8,"tem":23.3,"city":"tokyo"},
  11.   {"month":9,"tem":18.3,"city":"tokyo"},
  12.   {"month":10,"tem":13.9,"city":"tokyo"},
  13.   {"month":11,"tem":9.6,"city":"tokyo"},
  14.   {"month":0,"tem":-0.2,"city":"newYork"},
  15.   {"month":1,"tem":0.8,"city":"newYork"},
  16.   {"month":2,"tem":5.7,"city":"newYork"},
  17.   {"month":3,"tem":11.3,"city":"newYork"},
  18.   {"month":4,"tem":17,"city":"newYork"},
  19.   {"month":5,"tem":22,"city":"newYork"},
  20.   {"month":6,"tem":24.8,"city":"newYork"},
  21.   {"month":7,"tem":24.1,"city":"newYork"},
  22.   {"month":8,"tem":20.1,"city":"newYork"},
  23.   {"month":9,"tem":14.1,"city":"newYork"},
  24.   {"month":10,"tem":8.6,"city":"newYork"},
  25.   {"month":11,"tem":2.5,"city":"newYork"},
  26.   {"month":0,"tem":-0.9,"city":"berlin"},
  27.   {"month":1,"tem":0.6,"city":"berlin"},
  28.   {"month":2,"tem":3.5,"city":"berlin"},
  29.   {"month":3,"tem":8.4,"city":"berlin"},
  30.   {"month":4,"tem":13.5,"city":"berlin"},
  31.   {"month":5,"tem":17,"city":"berlin"},
  32.   {"month":6,"tem":18.6,"city":"berlin"},
  33.   {"month":7,"tem":17.9,"city":"berlin"},
  34.   {"month":8,"tem":14.3,"city":"berlin"},
  35.   {"month":9,"tem":9,"city":"berlin"},
  36.   {"month":10,"tem":3.9,"city":"berlin"},
  37.   {"month":11,"tem":1,"city":"berlin"}
  38. ];
  39. var chart = new G2.Chart({
  40.   id: 'c4',
  41.   forceFit: true,
  42.   height: 300
  43. });
  44. chart.source(data);
  45. chart.line().position('month*tem').color('city');
  46. chart.guide().rect([5, 'min'], [7, 'max']); // 6月 - 8月最低温度
  47. chart.render();

tag 辅助标签

  1. chart.guide().tag(startPoint, endPoint, text[, cfg]);
参数说明
startPoint线的起始点，是一个数组 [x, y]
endPoint线的起始点，是一个数组 [x, y]
text标记文本
cfg配置信息
  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   G2.Global.setTheme('cheery');
  3.   var Stat = G2.Stat;
  4.   var frame = new G2.Frame(data);
  5.   var caratAvg = G2.Frame.mean(frame,'carat'); // 计算克拉数均值
  6.   var priceAvg = G2.Frame.mean(frame,'price'); // 计算价格均值
  7.   var chart = new G2.Chart({ // 创建图表
  8.     id : 'c5',
  9.     forceFit : true,
  10.     height : 300
  11.   });
  12.   chart.source(frame); // 设置数据源
  13.   chart.point().position('carat*price');
  14.   chart.guide().tag([caratAvg,0],[caratAvg,20000],'钻石均值:'+caratAvg.toFixed(2))
  15.   chart.guide().tag([0,priceAvg],[4,priceAvg],'价格均值' + priceAvg.toFixed(2))
  16.   chart.guide().tag([3.65,11688],[4.2,16000],'异常值')
  17.   chart.render(); // 图表渲染
  18. });

arc 辅助弧线

  1. chart.guide().arc(startPoint, endPoint[, cfg]);
参数说明
startPoint线的起始点，是一个数组 [x, y]
endPoint线的结束点，是一个数组 [x, y]
cfg配置信息

辅助html

  1. chart.guide().html(startPoint, html, [cfg]);
参数说明
startPoint文本位置，是一个数组 [x, y]
html辅助html的自定义内容
cfghtml 的配置信息，支持对齐(align)和偏移(offset)，对齐方式支持tr、tc、tl、br、bc、bl、lc、rc、cc 9 点对齐。如图所示，image
  1. $.getJSON('../../../../../static/data/diamond.json', function(data) {
  2.   var Stat = G2.Stat;
  3.   var frame = new G2.Frame(data);
  4.   var caratAvg = G2.Frame.mean(frame,'carat'); // 计算克拉数均值
  5.   var priceAvg = G2.Frame.mean(frame,'price'); // 计算价格均值
  6.   var chart = new G2.Chart({ // 创建图表
  7.     id : 'c6',
  8.     forceFit : true,
  9.     height : 300
  10.   });
  11.   chart.source(frame); // 设置数据源
  12.   chart.point().position('carat*price');
  13.   // 坐标点
  14.   var point = [3.5,12000];
  15.   //html字符串
  16.   var tooltipHtml = "<div style='border: 2px solid #0f8de8;width: 50px;height: 26px;color: #0f8de8;position: relative;'>" +
  17.       "<span style='color:#63c6c2;font-size:15px'>异常值</span>" +
  18.       "<div style='width: 0;height: 0;border-bottom: 8px solid #0f8de8;border-right:10px solid transparent;position: absolute;top: 16px;left: 46px;'></div>" +
  19.       "</div>";
  20.   chart.guide().html(point, tooltipHtml, {align:'br',offset:[10,0]});
  21.   chart.render(); // 图表渲染
  22. });

动态辅助标记

辅助标记接受的位置信息的参数都是原始数据值，辅助标记一旦生成后就是固定的了位置，如果数据发生改变，辅助标记就需要删除掉重新创建

  2. // 清除图表
  3. chart.clear();
  5. // 重新声明图形语法
  6. chart.point().position('carat*price');
  8. chart.guide().html([newX, newY], htmlstring);
  10. chart.render();
  • newX,newY 是重新计算的位置

如果数据是动态更新的那么这个过程需要频繁进行，基于这种场景guide提供两种计算动态位置的：

  • 可以使用'min', 'max' 字符串代表原始值的最小值最大值，例如： [0, 'min'] 表示 x 轴上数值为0，y 轴位置在数值的最小值上
  • 表示位置的数组可以换成回调函数，函数原型： function(xScale, yScale) {return []}
    • xScale,yScale 映射到x轴上的字段生成的度量，详情查看 度量, api
    • 分类度量常用的值是 values 包含了所有的分类，连续度量常用的是 min,max
  1. var data = [];
  2. var time = Math.floor((new Date()).getTime()/1000) * 1000;
  4. for (var i = -19; i <= 0; i++) {
  5.   data.push({
  6.     time: time + i * 3 * 1000,
  7.     value: Math.random() + .25
  8.   });
  9. }
  11. // 查找最大值
  12. function findMax() {
  13.   var maxValue = 0;
  14.   var maxObj = null;
  15.   data.forEach(function(obj) {
  16.     if (obj.value > maxValue) {
  17.       maxValue = obj.value;
  18.       maxObj = obj;
  19.     }
  20.   });
  21.   return maxObj;
  22. }
  24. var chart = new G2.Chart({ // 创建图表
  25.   id : 'c7',
  26.   forceFit : true,
  27.   height : 300
  28. });
  30. chart.source(data, {
  31.   time: {
  32.     type: 'time',
  33.     mask: 'HH:mm:ss'
  34.   }
  35. });
  37. chart.line().position('time*value');
  39. // 添加一条虚线
  40. chart.guide().line(['min',0.25], ['max', 0.25]);
  42. chart.guide().text(function(){
  43.   var obj = findMax();
  44.   return [obj.time, obj.value];
  45. },'最大值');
  47. chart.render();
  49. setTimeout(function() {
  50.   data.pop();
  51.   data.push({
  52.     time: new Date().getTime(),
  53.     value: Math.random() + .25
  54.   });
  55. }, 3000);