图表如何支持自适应宽度

(1) 方式一

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

(2) 方式二

chart.forceFit();

如何格式化坐标轴文本

  1. chart.axis('field', {
  2.   label: {
  3.     formatter: val => {
  4.       return val + 'k';
  5.     }
  6.   }
  7. });

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

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

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

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

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

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

示例：

G2 常见问题 - 图1

  1. const 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. const chart = new G2.Chart({
  19.   container: 'chart1',
  20.   forceFit: true,
  21.   height: 334
  22. });
  23. const 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.scale()
  2. chart.scale('y', {
  3.   min: 0,
  4.   max: 100
  5. });

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

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

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

示例：
G2 常见问题 - 图2

  1. const 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. const map = {
  10.   Sports: '运动',
  11.   Strategy: '策略',
  12.   Action: '动作类',
  13.   Shooter: '射击类',
  14.   Other: '其他'
  15. };
  17. const chart = new G2.Chart({
  18.   container: 'chart2',  // 指定图表容器 ID
  19.   height : 300,     // 指定图表高度
  20.   forceFit: true,
  21. });
  23. chart.source(data, {
  24.   genre: {
  25.     formatter: 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('field', callback)

可以过滤指定字段的数据，其中 callback 是一个回调函数，回调函数的参数 field 字段对应的数值，参考下面 demo：
G2 常见问题 - 图3

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

示例：
G2 常见问题 - 图4

  1. const 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. const chart = new G2.Chart({
  17.   container: 'chart3',
  18.   forceFit: true, // 宽度自适应
  19.   height: 300,
  20.   padding: [ 60, 160, 60, 90 ]
  21. });
  23. chart.source(data, {
  24.   rainfall: {
  25.     min: 0,
  26.     tickInterval: 50,
  27.     alias: '降雨量'
  28.   },
  29.   temperature: {
  30.     min: 5,
  31.     tickInterval: 5,
  32.     alias: '温度'
  33.   },
  34.   seaLevelPressure: {
  35.     min: 1008,
  36.     max: 1028,
  37.     tickInterval: 4,
  38.     alias: '海平面气压'
  39.   }
  40. });
  41. // 左侧 Y 轴，即降雨量轴
  42. chart.axis('rainfall', {
  43.   label: {
  44.     formatter: val => {
  45.       return val + ' mm'; // 格式化坐标轴显示
  46.     },
  47.     textStyle: {
  48.       fill: '#95ceff'
  49.     }
  50.   },
  51.   line: null,
  52.   tickLine: null
  53. });
  54. // 右侧第一个 Y 轴，即温度轴
  55. chart.axis('temperature', {
  56.   line: null,
  57.   tickLine: null,
  58.   label: {
  59.     formatter: val => {
  60.       return val + ' °C'; // 格式化坐标轴显示
  61.     },
  62.     textStyle: {
  63.       fill: '#90ed7d'
  64.     }
  65.   }
  66. });
  67. // 右侧第二个 Y 轴，即海平面气压轴
  68. chart.axis('seaLevelPressure', {
  69.   line: null,
  70.   tickLine: null,
  71.   label: {
  72.     offset: 80,
  73.     formatter: val => {
  74.       return val + ' mb'; // 格式化坐标轴显示
  75.     },
  76.     textStyle: {
  77.       fill: '#333'
  78.     }
  79.   }
  80. });
  82. chart.legend({
  83.   position: 'top'
  84. });
  85. chart.tooltip({
  86.   crosshairs: {
  87.     type: 'line'
  88.   }
  89. });
  91. chart.interval().position('month*rainfall').color('#95ceff'); // 降雨量
  92. chart.line().position('month*temperature').color('#90ed7d').size(2).shape('smooth'); // 温度
  93. chart.point().position('month*temperature').color('#90ed7d').shape('diamond');
  94. chart.line()
  95.   .position('month*seaLevelPressure')
  96.   .shape('smooth')
  97.   .size(2)
  98.   .color('#333')
  99.   .style({
  100.     lineDash: [ 3, 3 ]
  101.   }); // 海平面气压
  102. chart.render();

如何绘制混合图表

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

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

参考如何绘制多 y 轴图表。

如何修改 tooltip 的显示内容

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

如何导出图片

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

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

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