使用配置项创建图表

使用配置项创建图表

G2 除了支持函数调用方式外，也支持图形语法的配置项式声明方式。

创建 Chart

  1. import { Chart } from '@antv/g2';
  3. chart = new Chart({
  4.   container: div,
  5.   autoFit: false,
  6.   width: 400,
  7.   height: 300,
  8.   padding: 12,
  9.   options: {
  10.     data: [
  11.       { genre: 'Sports', sold: 275 },
  12.       { genre: 'Strategy', sold: 115 },
  13.       { genre: 'Action', sold: 120 },
  14.       { genre: 'Shooter', sold: 350 },
  15.       { genre: 'Other', sold: 150 },
  16.     ],
  17.     scales: {
  18.       genre: { alias: '游戏种类' },
  19.       sold: { alias: '销售量' },
  20.     },
  21.     geometries: [
  22.       {
  23.         type: 'interval',
  24.         position: 'genre*sold',
  25.         color: 'genre',
  26.       },
  27.     ],
  28.     interactions: [{ type: 'active-region' }],
  29.   },
  30. });
  31. chart.render();

关于各个属性的使用，详见 API;

配置项更新

  1. chart.updateOptions(options);
  2. chart.render();

Options 参见类型定义。

实例

绘制柱状图

image.png

  1. const chart = new Chart({
  2.   container: 'mountNode',
  3.   width: 400,
  4.   height: 300,
  5.   options: {
  6.     data: [
  7.       { genre: 'Sports', sold: 275 },
  8.       { genre: 'Strategy', sold: 115 },
  9.       { genre: 'Action', sold: 120 },
  10.       { genre: 'Shooter', sold: 350 },
  11.       { genre: 'Other', sold: 150 },
  12.     ],
  13.     scales: {
  14.       genre: { alias: '游戏种类' },
  15.       sold: { alias: '销售量', nice: true },
  16.     },
  17.     geometries: [
  18.       {
  19.         type: 'interval',
  20.         position: 'genre*sold',
  21.         color: 'genre',
  22.       },
  23.     ],
  24.     interactions: [{ type: 'active-region' }],
  25.   },
  26. });
  28. chart.render();

绘制多 View

image.png

  1. const chart = new Chart({
  2.   container: 'mountNode',
  3.   width: 400,
  4.   height: 300,
  5.   options: {
  6.     data: [
  7.       { year: '1951 年', sales: 38 },
  8.       { year: '1952 年', sales: 52 },
  9.       { year: '1956 年', sales: 61 },
  10.       { year: '1957 年', sales: 145 },
  11.       { year: '1958 年', sales: 48 },
  12.       { year: '1959 年', sales: 38 },
  13.       { year: '1960 年', sales: 38 },
  14.       { year: '1962 年', sales: 38 },
  15.     ],
  16.     scales: {
  17.       sales: { tickInterval: 20, nice: true },
  18.     },
  19.     geometries: [
  20.       {
  21.         type: 'interval',
  22.         position: 'year*sales',
  23.         color: '#F6BD16',
  24.       },
  25.     ],
  26.     views: [
  27.       {
  28.         padding: 0,
  29.         options: {
  30.           axes: false,
  31.           tooltip: false,
  32.           geometries: [
  33.             {
  34.               type: 'line',
  35.               position: 'year*sales',
  36.               style: {
  37.                 lineWidth: 4,
  38.                 stroke: '#6DC8EC',
  39.               },
  40.             },
  41.           ],
  42.         },
  43.       },
  44.     ],
  45.   },
  46. });
  48. chart.render();