常见问题

图表如何支持自适应宽度如何格式化坐标轴文本怎么控制坐标轴刻度线个数以及刻度线的间距如何控制坐标轴的显示的数值范围如何格式化图例的显示文本如何设置图例项的初始状态如何绘制多 y 轴图表如何绘制混合图表如何修改 tooltip 的显示内容如何导出图片 图表如何支持自适应宽度如何格式化坐标轴文本怎么控制坐标轴刻度线个数以及刻度线的间距如何控制坐标轴的显示的数值范围如何格式化图例的显示文本如何设置图例项的初始状态如何绘制多 y 轴图表如何绘制混合图表如何修改 tooltip 的显示内容如何导出图片 图表如何支持自适应宽度(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);
  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="