G2 常见问题

    (2) 方式二

    如何格式化坐标轴文本

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

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

    chart.filter('field', callback)

    可以过滤指定字段的数据，其中 callback 是一个回调函数，回调函数的参数 field 字段对应的数值，参考下面 demo：

    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. ];
    39.  
    40. const chart = new G2.Chart({
    41.   container: 'c1',
    42.   width: 800,
    43.   height: 350
    44. });
    45.  
    46. const defs = {
    47.   month: {
    48.     type: 'cat',
    49.     values: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ]
    50.   }
    51. };
    52.  
    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();

    在 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');

    示例：

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

    如何绘制混合图表

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

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

    参考。

    如何修改 tooltip 的显示内容

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

    直接调用 即可导出图片。

    原文: