图表如何支持自适应宽度

(1) 方式一

  1. var chart = new G2.Chart({
  2.   id: 'c1',
  3.   forceFit: true,
  4.   height : 400
  5. });

(2) 方式二

chart.forceFit();

如何格式化坐标轴文本

  1. chart.axis('dim', {
  2.   formatter: function(val) {
  3.       return val + 'k';
  4.   }
  5. });

在线试一试

怎么控制坐标轴刻度线个数以及刻度线的间距

列定义中为对应的数据字段设置 tickCount 用于控制刻度线的个数；

  1. chart.source(data, {
  2.   y: {
  3.     tickCount: 8
  4.   }
  5. });
  1. // 或者使用 chart.col()
  2. chart.col('y', {
  3.   tickCount: 8
  4. });

列定义中为对应的数据字段设置 tickInterval 用于控制刻度线的间距；

  1. chart.source(data, {
  2.   y: {
  3.     tickInterval: 1000, // 当为时间类型时，请传入单位为微秒的数据
  4.   }
  5. });
  1. // 或者使用 chart.col()
  2. chart.col('y', {
  3.   tickInterval: 1000
  4. });

注意 tickCount 和 tickInterval 不可以同时设置。

示例：

  1. var data = [
  2.   {"value":10,"time":"2015-03-01T00:00:00.000Z"},
  3.   {"value":15,"time":"2015-03-02T00:00:00.000Z"},
  4.   {"value":26,"time":"2015-03-03T00:00:00.000Z"},
  5.   {"value":9,"time":"2015-03-04T00:00:00.000Z"},
  6.   {"value":12,"time":"2015-03-05T00:00:00.000Z"},
  7.   {"value":23,"time":"2015-03-06T00:00:00.000Z"},
  8.   {"value":18,"time":"2015-03-07T00:00:00.000Z"},
  9.   {"value":21,"time":"2015-03-08T00:00:00.000Z"},
  10.   {"value":52,"time":"2015-03-09T00:00:00.000Z"},
  11.   {"value":35,"time":"2015-03-10T00:00:00.000Z"},
  12.   {"value":47,"time":"2015-03-11T00:00:00.000Z"},
  13.   {"value":30,"time":"2015-03-12T00:00:00.000Z"},
  14.   {"value":45,"time":"2015-03-13T00:00:00.000Z"},
  15.   {"value":75,"time":"2015-03-14T00:00:00.000Z"},
  16.   {"value":34,"time":"2015-03-15T00:00:00.000Z"},
  17. ];
  18. var chart = new G2.Chart({
  19.   id : 'chart1',
  20.   forceFit: true,
  21.   height : 334
  22. });
  23. var defs = {
  24.   'time': {
  25.     type: 'time',
  26.     nice: false,
  27.     mask: 'mm-dd',
  28.     tickInterval: 2 * 24 * 60 * 60 * 1000 // 对于 linear 类型的数据，可以设置 tickInterval 参数来设定每个刻度之间的间距，time 类型的单位为微秒
  29.   },
  30.   value: {
  31.     tickInterval: 10
  32.   }
  33. };
  34. chart.source(data,defs);
  35. chart.line().position('time*value').color('red');
  36. chart.render();

如何控制坐标轴的显示的数值范围

列定义中，为对应的数据字段设置 min 和 max 字段。

  1. chart.source(data, {
  2.   y: {
  3.     min: 0,
  4.     max: 100
  5.   }
  6. });
  1. // 或者使用 chart.col()
  2. chart.col('y', {
  3.   min: 0,
  4.   max: 100
  5. });

如何格式化图例的显示文本

在列定义中，为对应字段设置 formatter 函数。

  1. chart.source(data, {
  2.   y: {
  3.     formatter: function(val) {
  4.       if (val === 'male') {
  5.         return '男';
  6.       } else {
  7.         return '女';
  8.       }
  9.     }
  10.   }
  11. });
  1. // 或者使用 chart.col()
  2. chart.col('y', {
  3.   formatter: function(val) {
  4.     if (val === 'male') {
  5.       return '男';
  6.     } else {
  7.       return '女';
  8.     }
  9.   }
  10. });

示例：

  1. var data = [
  2.   {genre: 'Sports', sold: 275},
  3.   {genre: 'Strategy', sold: 115},
  4.   {genre: 'Action', sold: 120},
  5.   {genre: 'Shooter', sold: 350},
  6.   {genre: 'Other', sold: 150},
  7. ];
  9. var map = {
  10.   'Sports': '运动',
  11.   'Strategy': '策略',
  12.   'Action': '动作类',
  13.   'Shooter': '射击类',
  14.   'Other': '其他'
  15. };
  17. var chart = new G2.Chart({
  18.   id: 'chart2',  // 指定图表容器 ID
  19.   height : 300,     // 指定图表高度
  20.   forceFit: true,
  21. });
  23. chart.source(data, {
  24.   genre: {
  25.     formatter: function(val) {
  26.       return map[val];
  27.     }, // **关键代码**：在列定义中调用 formatter 回调函数，
  28.     alias: '游戏种类' // 列定义，定义该属性显示的别名
  29.   },
  30.   sold: {
  31.     alias: '销售量'
  32.   }
  33. });
  34. chart.interval().position('genre*sold').color('genre');
  35. chart.render();

如何设置图例项的初始状态

chart.filter('dim', arr)

可以过滤指定字段的数据，其中 arr 是一个数组，代表该 dim 字段你要保留的数据值。如果存在对应字段的图例，那么被过滤掉的类型会被取消选中，如下图表所示：

  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. ];
  40. var chart = new G2.Chart({
  41.   id: 'c1',
  42.   width: 800,
  43.   height: 350
  44. });
  46. var defs = {'month':{
  47.   type: 'cat',
  48.   values: [
  49.     '一月','二月','三月','四月','五月','六月',
  50.     '七月','八月','九月','十月','十一月','十二月']
  51. }};
  53. chart.source(data,defs);
  55. chart.filter('city', ['berlin']); // 只展示 berlin 的数据
  56. chart.line().position('month*tem').color('city');
  57. chart.render();

如何绘制多 y 轴图表

在 G2 中，实现多 Y 轴的绘制非常简单，用户完全不需要做任何配置。只要做到各个 geom 的 X 轴属性相同， Y 轴属性不同，G2 就会为您自动生成。

  1. chart.interval().position('month*rainfall').color('#95ceff');
  2. chart.line().position('month*temperature').color('#90ed7d').size(2).shape('smooth');

这个时候就会自动生成两条 y 轴，分别对应 rainfall 和 temperature。

示例：

  1. var data = [
  2.   {"month":"Jan","rainfall":49.9,"seaLevelPressure":1016,"temperature":7},
  3.   {"month":"Feb","rainfall":71.5,"seaLevelPressure":1016,"temperature":6.9},
  4.   {"month":"Mar","rainfall":106.4,"seaLevelPressure":1015.9,"temperature":9.5},
  5.   {"month":"Apr","rainfall":129.2,"seaLevelPressure":1015.5,"temperature":14.5},
  6.   {"month":"May","rainfall":144,"seaLevelPressure":1012.3,"temperature":18.2},
  7.   {"month":"Jun","rainfall":176,"seaLevelPressure":1009.5,"temperature":21.5},
  8.   {"month":"Jul","rainfall":135.6,"seaLevelPressure":1009.6,"temperature":25.2},
  9.   {"month":"Aug","rainfall":148.5,"seaLevelPressure":1010.2,"temperature":26.5},
  10.   {"month":"Sep","rainfall":216.4,"seaLevelPressure":1013.1,"temperature":23.3},
  11.   {"month":"Oct","rainfall":194.1,"seaLevelPressure":1016.9,"temperature":18.3},
  12.   {"month":"Nov","rainfall":95.6,"seaLevelPressure":1018.2,"temperature":13.9},
  13.   {"month":"Dec","rainfall":54.4,"seaLevelPressure":1016.7,"temperature":9.6}
  14. ];
  16. var chart = new G2.Chart({
  17.   id: 'chart3',
  18.   forceFit: true, // 宽度自适应
  19.   height: 300,
  20.   plotCfg: {
  21.     margin: [60, 160, 60, 90]
  22.   }
  23. });
  25. chart.source(data, {
  26.   rainfall: {
  27.     min: 0,
  28.     tickInterval: 50,
  29.     alias: '降雨量'
  30.   },
  31.   temperature: {
  32.     min: 5,
  33.     tickInterval: 5,
  34.     alias: '温度'
  35.   },
  36.   seaLevelPressure: {
  37.     min: 1008,
  38.     max: 1028,
  39.     tickInterval: 4,
  40.     alias: '海平面气压'
  41.   }
  42. });
  43. // 左侧 Y 轴，即降雨量轴
  44. chart.axis('rainfall', {
  45.   formatter: function(val) {
  46.     return val + ' mm'; // 格式化坐标轴显示
  47.   },
  48.   line: null,
  49.   tickLine: null,
  50.   titleOffset: 80,
  51.   labels: {
  52.     label: {
  53.       fill: '#95ceff'
  54.     }
  55.   },
  56.   title: {
  57.     fill: '#95ceff',
  58.     fontSize: 14
  59.   }
  60. });
  61. // 右侧第一个 Y 轴，即温度轴
  62. chart.axis('temperature', {
  63.   formatter: function(val) {
  64.     return val + ' °C'; // 格式化坐标轴显示
  65.   },
  66.   line: null,
  67.   tickLine: null,
  68.   titleOffset: 80,
  69.   labels: {
  70.     label: {
  71.       fill: '#90ed7d'
  72.     }
  73.   },
  74.   title: {
  75.     fill: '#90ed7d',
  76.     fontSize: 14
  77.   }
  78. });
  79. // 右侧第二个 Y 轴，即海平面气压轴
  80. chart.axis('seaLevelPressure', {
  81.   formatter: function(val) {
  82.     return val + ' mb'; // 格式化坐标轴显示
  83.   },
  84.   line: null,
  85.   tickLine: null,
  86.   titleOffset: 210,
  87.   labelOffset: 80,
  88.   labels: {
  89.     label: {
  90.       fill: '#333'
  91.     }
  92.   },
  93.   title: {
  94.     fill: '#333',
  95.     fontSize: 14
  96.   }
  97. });
  99. chart.axis('month', {title: null});
  100. chart.legend({position: 'top'});
  101. chart.tooltip({crosshairs: true});
  103. chart.interval().position('month*rainfall').color('#95ceff'); // 降雨量
  104. chart.line().position('month*temperature').color('#90ed7d').size(2).shape('smooth'); // 温度
  105. chart.point().position('month*temperature').color('#90ed7d').shape('diamond');
  106. chart.line().position('month*seaLevelPressure').shape('dotSmooth').size(2).color('#333'); // 海平面气压
  107. chart.render();

如何绘制混合图表

G2 采用图层的设计，每一个几何标记 geom 对应一个图形，当需要绘制混合图表时，直接在 chart 对象上创建不同的 geom 几何对象即可。

image

在这个例子中除了生成多 Y 轴之外还绘制了混合图表（柱状图、线图以及点图）。

示例详见：如何绘制多 y 轴图表

如何修改 tooltip 的显示内容

G2 提供了多种修改 tooltip 显示内容的方法，详见 tooltip 提示信息 教程。

如何导出图片

直接调用 chart.downloadImage(); 即可导出图片。

但是注意最好在 chart 生成后延时几秒调用，因为 chart 默认是有执行动画的，如：

  1. setTimeout(function() {
  2.   chart.downloadImage();
  3. }, 1500);