配置项声明方式

    为 对象新增 属性，用于支持配置项式声明。

    可以先通过以下几个例子来了解下：

    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 chart = new G2.Chart({
    9.   container: 'c1',
    10.   forceFit: true,
    11.   height: 300,
    12.   data,
    13.   options: {
    14.     scales: {
    15.       'genre': {
    16.         alias: '游戏种类'
    17.       },
    18.       'sold': {
    19.         alias: '销售量'
    20.       }
    21.     },
    22.     geoms: [
    23.       {
    24.         type: 'interval',
    25.         position: 'genre*sold',
    26.         color: 'genre'
    27.       }
    28.     ]
    29.   }
    30. });
    31. chart.render();

    对应函数式调用代码如下：

    1. const chart = new G2.Chart({
    2.   container: 'c1',
    3.   height : 300,
    4.   forceFit: true,
    5. });
    6. chart.source(data, {
    7.   genre: {
    8.     alias: '游戏种类'
    9.   },
    10.   sold: {
    11.     alias: '销售量'
    12.   }
    13. });
    14. chart.interval().position('genre*sold').color('genre')
    15. chart.render();
    1. const { DataView } = DataSet;
    2. $.getJSON('/assets/data/diamond.json', (data) => {
    3.   const dv = (new DataView()).source(data);
    4.   const caratAvg = dv.mean('carat'); // 计算克拉数均值
    5.   const priceAvg = dv.mean('price'); // 计算价格均值
    6.   const chart = new G2.Chart({
    7.     container: 'c2',
    8.     forceFit: true,
    9.     height: 450,
    10.     data,
    11.     options: {
    12.       guides: [
    13.         {
    14.           type: 'line',
    15.           start: [ caratAvg, 0 ], // 使用数组格式
    16.           end: [ caratAvg, 20000 ],
    17.           text: {
    18.             position: 'end',
    19.             autoRotate: false,
    20.             content: '克拉数均值:' + caratAvg
    21.           }
    22.         },
    23.         {
    24.           type: 'line',
    25.           start: {
    26.             carat: 0,
    27.             price: priceAvg
    28.           }, // 使用对象格式
    29.           end: {
    30.             carat: 4,
    31.             price: priceAvg
    32.           },
    33.           text: {
    34.             position: 'end',
    35.             autoRotate: false,
    36.             content: '价格均值:' + priceAvg,
    37.             style: {
    38.               textAlign: 'end'
    39.             }
    40.           }
    41.         },
    42.       ],
    43.       geoms: [
    44.         {
    45.           type: 'point',
    46.           position: 'carat*price',
    47.           shape: 'circle',
    48.           opacity: 0.3
    49.         }
    50.       ]
    51.     }
    52.   });
    53.   chart.render();
    54. });

    对应函数式调用代码如下：

    1. const chart = new G2.Chart({ // 创建图表
    2.   container : 'c2',
    3.   forceFit: true,
    4.   height: 450
    5. });
    6.  
    7. chart.source(data); // 设置数据源
    8. chart.point().position('carat*price').shape('circle').opacity(0.3);
    9. chart.guide().line({
    10.   start: [ caratAvg, 0 ], // 使用数组格式
    11.   end: [ caratAvg, 20000 ],
    12.   text: {
    13.     position: 'end',
    14.     autoRotate: false,
    15.     content: '克拉数均值:' + caratAvg
    16.   }
    17. });
    18. chart.guide().line({
    19.   start: {
    20.     carat: 0,
    21.     price: priceAvg
    22.   }, // 使用对象格式
    23.   end: {
    24.     carat: 4,
    25.     price: priceAvg
    26.   },
    27.   text: {
    28.     position: 'end',
    29.     autoRotate: false,
    30.     content: '价格均值:' + priceAvg,
    31.     style: {
    32.       textAlign: 'end'
    33.     }
    34.   }
    35. });
    36. chart.render(); // 图表渲染
    1. $.getJSON('/assets/data/world.geo.json', (mapData) => {
    2.   const chart = new G2.Chart({
    3.     container: 'c3',
    4.     forceFit: true,
    5.     height: 450,
    6.     padding: [ 55, 20 ],
    7.     options: {
    8.       tooltip: {
    9.         showTitle: false
    10.       },
    11.       scales: {
    12.         longitude: {
    13.           sync: true
    14.         },
    15.         latitude: {
    16.           sync: true
    17.         }
    18.       },
    19.       axes: false,
    20.       legends: {
    21.         'trend': {
    22.           position: 'left'
    23.         }
    24.       }
    25.     }
    26.   });
    27.   // 绘制世界地图背景
    28.   const ds = new DataSet();
    29.   const worldMap = ds.createView('back')
    30.     .source(mapData, {
    31.       type: 'GeoJSON'
    32.     });
    33.   const view = chart.view({
    34.     data: worldMap,
    35.     options: {
    36.       tooltip: false,
    37.       geoms: [
    38.         {
    39.           type: 'polygon',
    40.           position: 'longitude*latitude',
    41.           style: {
    42.             fill: '#fff',
    43.             stroke: '#ccc',
    44.             lineWidth: 1
    45.           }
    46.         }
    47.       ]
    48.     }
    49.   });
    50.  
    51.   // 绘制展示数据
    52.   // 可视化用户数据
    53.   const userData = [
    54.     { name: 'Russia', value: 86.8 },
    55.     { name: 'China', value: 106.3 },
    56.     { name: 'Japan', value: 94.7 },
    57.     { name: 'Mongolia', value: 98 },
    58.     { name: 'Canada', value: 98.4 },
    59.     { name: 'United Kingdom', value: 97.2 },
    60.     { name: 'United States of America', value: 98.3 },
    61.     { name: 'Brazil', value: 96.7 },
    62.     { name: 'Argentina', value: 95.8 },
    63.     { name: 'Algeria', value: 101.3 },
    64.     { name: 'France', value: 94.8 },
    65.     { name: 'Ukraine', value: 86.3 },
    66.     { name: 'Egypt', value: 102.1 },
    67.     { name: 'South Africa', value: 101.3 },
    68.     { name: 'India', value: 107.6 },
    69.     { name: 'Australia', value: 99.9 },
    70.     { name: 'Saudi Arabia', value: 130.1 },
    71.     { name: 'Afghanistan', value: 106.5 },
    72.     { name: 'Kazakhstan', value: 93.4 },
    73.     { name: 'Indonesia', value: 101.4 }
    74.   ];
    75.   const userDv = ds.createView()
    76.     .source(userData)
    77.     .transform({
    78.       geoDataView: worldMap,
    79.       field: 'name',
    80.       type: 'geo.region',
    81.       as: [ 'longitude', 'latitude' ]
    82.     })
    83.     .transform({
    84.       type: 'map',
    85.       callback: (obj) => {
    86.         obj.trend = (obj.value > 100) ? '男性更多' : '女性更多';
    87.         return obj;
    88.       }
    89.     });
    90.   const userView = chart.view({
    91.     data: userDv,
    92.     options: {
    93.       scales: {
    94.         'trend': {
    95.           alias: '每100位女性对应的男性数量'
    96.         }
    97.       },
    98.       geoms: [
    99.         {
    100.           type: 'polygon',
    101.           position: 'longitude*latitude',
    102.           color: {
    103.             field: 'trend',
    104.             colors: [ '#C45A5A', '#14647D' ]
    105.           },
    106.           opacity: 'value',
    107.           tooltip: 'name*trend',
    108.           animate: {
    109.             leave: {
    110.               animation: 'fadeOut'
    111.             }
    112.           }
    113.         }
    114.       ]
    115.     }
    116.   });
    117.   chart.render();
    118. });

    对应的函数式调用代码如下：

    1. const chart = new G2.Chart({
    2.   container: 'c3',
    3.   forceFit: true,
    4.   height: 450,
    5.   padding: [ 55, 20 ]
    6. });
    7. chart.tooltip({
    8.   showTitle: false
    9. });
    10. // 同步度量
    11. chart.scale({
    12.   longitude: {
    13.     sync: true
    14.   },
    15.   latitude: {
    16.     sync: true
    17.   }
    18. });
    19. chart.axis(false);
    20. chart.legend('trend', {
    21.   position: 'left'
    22. });
    23.  
    24. // 绘制世界地图背景
    25. const ds = new DataSet();
    26. const worldMap = ds.createView('back')
    27.   .source(mapData, {
    28.     type: 'GeoJSON'
    29.   });
    30. const worldMapView = chart.view();
    31. worldMapView.source(worldMap);
    32. worldMapView.tooltip(false);
    33. worldMapView.polygon().position('longitude*latitude').style({
    34.   fill: '#fff',
    35.   stroke: '#ccc',
    36.   lineWidth: 1
    37. });
    38.  
    39. // 可视化用户数据
    40. const userData = [
    41.   { name: 'Russia', value: 86.8 },
    42.   { name: 'China', value: 106.3 },
    43.   { name: 'Japan', value: 94.7 },
    44.   { name: 'Mongolia', value: 98 },
    45.   { name: 'Canada', value: 98.4 },
    46.   { name: 'United Kingdom', value: 97.2 },
    47.   { name: 'United States of America', value: 98.3 },
    48.   { name: 'Brazil', value: 96.7 },
    49.   { name: 'Argentina', value: 95.8 },
    50.   { name: 'Algeria', value: 101.3 },
    51.   { name: 'France', value: 94.8 },
    52.   { name: 'Germany', value: 96.6 },
    53.   { name: 'Ukraine', value: 86.3 },
    54.   { name: 'Egypt', value: 102.1 },
    55.   { name: 'South Africa', value: 101.3 },
    56.   { name: 'India', value: 107.6 },
    57.   { name: 'Australia', value: 99.9 },
    58.   { name: 'Saudi Arabia', value: 130.1 },
    59.   { name: 'Afghanistan', value: 106.5 },
    60.   { name: 'Kazakhstan', value: 93.4 },
    61.   { name: 'Indonesia', value: 101.4}
    62.   ];
    63. const userDv = ds.createView()
    64.   .source(userData)
    65.   .transform({
    66.     geoDataView: worldMap,
    67.     field: 'name',
    68.     type: 'geo.region',
    69.     as: [ 'longitude', 'latitude' ]
    70.   })
    71.   .transform({
    72.     type: 'map',
    73.     callback: (obj) => {
    74.       obj.trend = (obj.value > 100) ? '男性更多' : '女性更多';
    75.       return obj;
    76.     }
    77.   });
    78. const userView = chart.view();
    79. userView.source(userDv, {
    80.   'trend': {
    81.     alias: '每100位女性对应的男性数量'
    82.   }
    83. });
    84. userView.polygon()
    85.   .position('longitude*latitude')
    86.   .color('trend', [ '#C45A5A', '#14647D' ])
    87.   .opacity('value')
    88.   .tooltip('name*trend')
    89.   .animate({
    90.     leave: {
    91.       animation: 'fadeOut'
    92.     }
    93.   });
    94. chart.render();
    1. const options = {
    2.   scales: {object}, // 列定义声明
    3.   coord: {object}, // 坐标系配置
    4.   axes: {object}, // 坐标轴配置
    5.   legends: {object}, // 图例配置
    6.   guides: {array}, // 图表辅助元素配置
    7.   filters: {object}, // 数据过滤配置
    8.   tooltip: {object}, // 提示信息配置
    9.   facet: {object}, // 分面配置
    10.   geoms: {array} // 图形语法相关配置
    11. }

    类型： object

    用于定义所有的列定义。使用方式同 chart.scale()。

    具体使用方式如下

    1. scales: {
    2.   field1: {object}, // 为数据字段 field1 进行列定义
    3.   field2: {object}, // 为数据字段 field2 进行列定义
    4.   ...
    5. }

    具体列定义的参数 API： 。

    示例

    1. chart.scale({
    2.   x: {
    3.     type: 'cat',
    4.     tickCount: 10
    5.   },
    6.   y: {
    7.     type: 'linear',
    8.     nica: false
    9.   }
    10. });
    11. // 上述函数调用对应如下配置项声明
    12. scales: {
    13.   x: {
    14.     type: 'cat',
    15.     tickCount: 10
    16.   },
    17.   y: {
    18.     type: 'linear',
    19.     nica: false
    20.   }
    21. }

    coord

    类型： object

    坐标系配置，函数式调用 api: chart.coord(type, cfg)。

    1. coord: {
    2.   type: {string}, // 坐标系类型声明，可取值: rect polar theta map helix gauge clock
    3.   cfg: {object}, // 对应各个 type 坐标系属性配置，同 `chart.coord(type, cfg)` 中的 cfg
    4.   actions: {array} // 声明坐标系需要进行的变换操作
    5. }

    actions 属性的声明方式如下:

    1. actions: [
    2.   [ 'transpose' ],
    3.   [ 'rotate', 90 ],
    4.   [ 'scale', 1, -1 ],
    5.   [ 'reflect', 'x' ]
    6. ]

    示例

    1. chart.coord('polar', {
    2.   innerRadius: 0.3,
    3.   startAngle: - Math.PI / 2,
    4.   endAngle: 3 * Math.PI / 2
    5. }).transpose();
    6.  
    7. // 上述函数式调用对应如下配置
    8. coord: {
    9.   type: 'polar',
    10.   cfg: {
    11.     innerRadius: 0.3,
    12.     startAngle: - Math.PI / 2,
    13.     endAngle: 3 * Math.PI / 2
    14.   },
    15.   actions: [
    16.     [ 'transpose' ]
    17.   ]
    18. }

    类型：

    图表坐标轴配置，对应 chart.axis(dim, cfg) 方法。

    具体使用方式：

    • 不展示坐标轴
    1. axes: false
    • 不展示某条坐标轴
    1. axes: {
    2.   field: false, // 不展示数据字段 field1 对应的坐标轴
    3. }
    • 为各个的坐标轴进行配置
    1. axes: {
    2.    field1: {object},
    3.    field2: {object}
    4.    // ...
    5. }

    具体的配置属性同 chart.axis(field, cfg)。

    示例

    1. chart.axis('x', false);
    2. chart.axis('y', {
    3.   tickLine: {
    4.     length: 5,
    5.     lineWidth: 2
    6.   label: {
    7.     formatter: val => {
    8.       return val + '$';
    9.     },
    10.     textStyle: {
    11.       fontSize: 12
    12.     }
    13.   }
    14. });
    15. // 上述函数式调用对应如下配置
    16. axes: {
    17.   x: false,
    18.   y: {
    19.     tickLine: {
    20.       length: 5,
    21.       lineWidth: 2
    22.     },
    23.     label: {
    24.       formatter: val => {
    25.         return val + '$';
    26.       },
    27.       textStyle: {
    28.         fontSize: 12
    29.       }
    30.     }
    31.   }
    32. }

    legends

    类型： object

    图表图例配置，对应 chart.legend()。

    • 不显示所有的图例
    1. legends: false
    • 为默认的图例进行配置
    • 为各个数据字段对应的图例进行配置
    1. legends: {
    2.   field1: {object}, 
    3.   field2: false // 不展示 field2 对应的图例 
    4. }

    示例

    1. chart.legend('x', false);
    2. chart.legend('y', {
    3.   position: 'top'
    4. });
    5. // 上述函数式调用对应如下配置
    6. legends: {
    7.   x: false,
    8.   y: {
    9.     position: 'top'
    10.   }
    11. }

    类型：

    图表辅助元素定义，对应 chart.guide()。

    1.  [
    2.     {
    3.       type: 'line', // 声明辅助元素的类型
    4.       start: {array}, // 辅助线起始点，[startX, startY]
    5.       end: {array}, // 辅助线结束点，[endX, endY]
    6.       style: {
    7.         stroke: '#999', // 线的颜色
    8.         lineDash: [ 0, 2, 2 ], // 虚线的设置
    9.         lineWidth: 3 // 线的宽度
    10.       } // {object} 配置项,与原语法相同
    11.     }
    12.   ]

    示例

    1. chart.guide().line({
    2.     start: [ caratAvg, 0 ], // 使用数组格式
    3.     end: [ caratAvg, 20000 ],
    4.     text: {
    5.       position: 'end',
    6.       autoRotate: false,
    7.       content: '克拉数均值:' + caratAvg
    8.     }
    9.   });
    10. // 上述函数式调用对应如下配置
    11. guides: [
    12.   {
    13.     type: 'line',
    14.     start: [ caratAvg, 0 ], // 使用数组格式
    15.     end: [ caratAvg, 20000 ],
    16.     text: {
    17.       position: 'end',
    18.       autoRotate: false,
    19.       content: '克拉数均值:' + caratAvg
    20.     }
    21.   }
    22. ]

    filters

    类型：object

    数据过滤，对应 chart.filter(dim, callback)。

    1. filters: {
    2.   ${field1}: {function}, // 对字段名为 field1 的数据进行过滤
    3.   ${field2}: {function}, // 对字段名为 field2 的数据进行过滤
    4.   ...
    5. }

    示例

    1. chart.filter('x', val => {
    2.   return val > 20;
    3. });
    4. // 上述函数式调用对应如下配置
    5. filters: {
    6.   x: val => {
    7.     return val > 20;
    8.   }
    9. }

    对应

    示例

    1. chart.tooltip(false);
    2. chart.tooltip({
    3.   showTitle: false
    4. });
    5. // 上述函数式调用分别对应如下配置
    6. tooltip: false,
    7. tooltip: {
    8.   showTitle: false
    9. }

    geoms

    类型：array

    用于声明绘制图表的图形语法，可同时声明多种 geom 配置。对应函数式调用 api： Geom。

    1. geoms: [
    2.   {
    3.     type: {string}, // 声明 geom 的类型：point line path area interval polygon schema edge heatmap pointStack pointJitter pointDodge intervalStack intervalDodge intervalSymmetric areaStack schemaDodge
    4.     adjust: {string} | {array}, // 数据调整方式声明，如果只有一种调整方式，可以直接声明字符串，如果有多种混合方式，则以数组格式传入
    5.     position: {string} | {object}, // potision 图形属性配置
    6.     color: {string} | {object}, // color 图形属性配置
    7.     shape: {string} | {object}, // shape 图形属性配置
    8.     size: {string} | {object}, // size 图形属性配置
    9.     opacity: {string} | {object}, // opacity 图形属性配置
    10.     label: {string} | {object}, // 图形上文本标记的配置
    11.     tooltip: {string}, // 配置 tooltip 上显示的字段名称
    12.     style: {object}, // 图形的样式属性配置
    13.     active: {boolean}, // 开启关闭 geom active 交互
    14.     select: {object}, // geom 选中交互配置
    15.     animate: {object} // 动画配置
    16.   },
    17.   {
    18.     // 同上述配置相同，可以定义多个 geom
    19.   }
    20. ]

    positon

    用于声明映射至位置 position 属性的数据字段，使用方式很简单：

    1. position: 'field1*field2'

    或者

    1. position: {
    2.   field: 'field1*field2'
    3. }

    color

    • chart.geom().color(value) 对应：
    1. color: value, // value 可以是数据字段名、颜色值

    或者

    1. color: {
    2.   field: value, // value 可以是数据字段名、颜色值
    3. }
    • chart.geom().color(field, colors) 对应：
    1. color: {
    2.   field: {string}, // 声明映射至 color 属性的数据字段名
    3.   colors: {array | string } // string | array，可声明颜色、渐变颜色等
    4. }
    • 回调函数声明 chart.geom().color(field, colorCallback) 对应：
    1. color: {
    2.   field: {string}, // 声明映射至 color 属性的数据字段名
    3.   callback: {function} // 用户自定义回调函数
    4. }

    shape

    • chart.geom().shape(value) 对应：
    1. shape: value, // value 可以是数据字段名、图形形状名

    或者

    1. shape: {
    2.   field: value, // value 可以是数据字段名、图形形状名
    3. }
    • chart.geom().shape(field, shapes) 对应：
    1. shape: {
    2.   field: {string}, // 声明映射至 shape 属性的数据字段名
    3.   shapes: {string | array} // string | array
    4. }
    • 回调函数声明 chart.geom().shape(field, callback) 对应：

    size

    • chart.geom().size(value） 对应
    1. size: value // value 可以是数据字段名、数值

    或者

    1. size: {
    2.   field: value, // value 可以是数据字段名、图形形状名
    3. }
    • chart.geom().size(field, [ min, max ]) 对应：
    1. size: {
    2.   field: {string}, // 声明映射至 size 属性的数据字段名
    3.   range: [min, max ] // 声明 size 的最大和最小值
    4. }
    • chart.geom().size(field, callback) 对应：
    1. size: {
    2.   field: {string}, // 声明映射至 size 属性的数据字段名
    3.   callback: {function}
    4. }

    opacity

    • chart.geom().opacity(field) 对应：
    1. opacity: field, // field 对应映射至 opacity 的数据字段名、具体透明度数值

    或者

    1. opacity: {
    2.   field: field // field 对应映射至 opacity 的数据字段名、具体透明度数值
    3. }
    • chart.geom().opacity(field, callback) 对应
    1. opacity: {
    2.   field: {string}, // 声明映射至 opacity 属性的数据字段名
    3.   callback: {function}
    4. }

    label

    • chart.geom().label(field) 对应
    1. label: field, // field 对应字段名或者带有统计的声明
    • chart.geom().label(field, cfg) 对应
    1. label: {
    2.   field: {string}, // 需要标注的数据字段名
    3.   cfg: {object} // 具体的 label 配置，参见 geom.label() 方法
    4. }
    • 如果 label 中需要声明回调函数，声明 callback 属性即可：
    1. label: {
    2.   field: {string}, // 需要标注的数据字段名
    3.   cfg: {object}, // 具体的 label 配置
    4.   callback: {function}
    5. }

    tooltip

    1. // 对应 geom.tooltip('x')
    2. tooltip: {string} // 直接声明需要显示在 tooltip 上的字段名
    3. // 对应 geom.tooltip('x', function(val){})
    4. tooltip: {
    5.   field: {string},
    6.   callback: {function}
    7. }

    style

    1. // 使用方式一
    2. style: {
    3.   field: {string}, // 映射的字段
    4.   cfg: {object} // 配置信息
    5. };
    6. // 使用方式二
    7. style: {
    8.   lineWidth: 1 // 样式的配置信息
    9. }

    select

    1. select: {boolean} // 开启关闭选中功能
    1. select: {
    2.   mode:  'multiple' | 'single', // multiple 为多选，single 为单选， false 为关闭选中功能
    3.   style: {
    4.     // 设置选中图形的样式，不设置则使用默认提供的样式
    5.     // 图形绘制属性，如 fill stroke
    6.   }
    7. }

    active

    1. active: false | true

    animate

    1. animate: {
    2.   // 同 geom.animate()
    3. }

    View 视图的配置项声明

    视图的配置项同 chart 基本一致，除了不支持 facet，以及 tooltip 属性值为 boolean 类型外，其他均同 chart 一致。

    1. const view = chart.view({
    2.   options: {
    3.     scales: {object}, // 列定义声明
    4.     coord: {object}, // 坐标系配置
    5.     axes: {object}, // 坐标轴配置
    6.     legends: {object}, // 图例配置
    7.     guides: {array}, // 图表辅助元素配置
    8.     filters: {object}, // 数据过滤配置
    9.     tooltip: {boolean}, // 默认值为 true，显示 tooltip， false 为关闭 tooltip
    10.     geoms: {array} // 图形语法相关配置
    11.   }
    12. });

    Slider