G2使用中的一些坑：自定義圖例、混合圖形、label 默認隱藏等問題

 

一、自定義圖例 legend

一般自定義圖例較多的使用在混合圖形里，以 G2 官網的這個 chart 為例，通過定制 legend 來顯示自己定義的圖例。

注意：legend 的配置項里一定要設置 custom: true ，自己在寫的時候過多關注多個圖形疊加使用，沒有注意設置 custom，結果圖表顯示一直有問題，圖例也顯示不出來，折騰到懷疑人生。

 

 

二、坐標軸的 label 太多，默認會自動隱藏 label(如下圖)，如何設置每個 label 都顯示出來呢？

答：比如上圖的 x 坐標為 'name'，則通過 chart.axis() 來設置 label：

this.chart.axis('name', {
   label: {
     autoHide: false | true,
   },
})

　其他的設置說明：https://github.com/antvis/G2/blob/af9b265d2/src/interface.ts#L1387

 

三、百分比堆疊柱狀圖：顏色的順序

1、以下截圖是官網的例子，哪個數據顯示在柱子的上方，是由 data 里的數據順序決定的（排在 data 前面的會顯示在上方）。

2、設置柱子的顏色：

chart
  .interval()
  .position('year*percent')
  .color('country', ['green', 'pink']) // green 在上方，pink 在下方
  .adjust('stack');

　　

 

 

四、混合圖形：柱狀圖/堆疊圖 + 折線圖

還以百分比堆疊圖為例：data 里添加了 line 字段。

const data = [
  { country: 'Europe', year: '1750', value: 163, line: 20 },
  { country: 'Europe', year: '1800', value: 203, line: 40 },
  { country: 'Europe', year: '1850', value: 276, line: 20 },
  { country: 'Europe', year: '1900', value: 408, line: 20 },
  { country: 'Europe', year: '1950', value: 547, line: 20 },
  { country: 'Europe', year: '1999', value: 729, line: 20 },
  { country: 'Europe', year: '2050', value: 628, line: 20 },
  { country: 'Europe', year: '2100', value: 828, line: 20 },
  { country: 'Asia', year: '1750', value: 502, line: 20 },
  { country: 'Asia', year: '1800', value: 635, line: 40 },
  { country: 'Asia', year: '1850', value: 809, line: 20 },
  { country: 'Asia', year: '1900', value: 947, line: 20 },
  { country: 'Asia', year: '1950', value: 1402, line: 20 },
  { country: 'Asia', year: '1999', value: 3634, line: 20 },
  { country: 'Asia', year: '2050', value: 5268, line: 20 },
  { country: 'Asia', year: '2100', value: 7268, line: 20 },
];

　　

 

 注意：要配置 line 的坐標軸的 min，不然 line 的坐標軸是以 line 字段的最小數值為起點（並不是 0 為起點）。

有時候需求要求不顯示 右側坐標軸，可用 chart.axis('line', false) 隱藏掉。

 

五、axis 的 title label 設置

 如果想在圖標的 x 軸位置添加一段文字，可使用 alias title 的屬性進行配置

chart.scale('quarter', {
   alias: '這是一段文字',
   nice: true,
})
chart.axis('quarter', {
    title: {
       style: {
            fontSize: 12,
            fill: '#5e5e5e',
            x: 50, // 如果不設置 x y 的值，則 title 居中顯示
        },
     },
})