AntV G2 圖表tooltip重命名

在做數據可視化的過程中，遇到了一個問題，就是給圖表tooltip重命名。

在研究后，發現了三種方法：

方法1：一般情況下，可以在給chart綁定數據源時，添加scale配置，並在scale配置中設置別名，直接在官網的實例代碼中進行修改演示：

代碼如下：

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
];
const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 500
});
chart.source(data);
chart.scale('value', {
  alias:'值',　　　　//為value字段設置別名，在tooltip顯示時則顯示別名
  min: 0
});
chart.scale('year', {
  range: [ 0, 1 ]
});
chart.tooltip({
  crosshairs: {
    type: 'line'
  }
});
chart.line().position('year*value');
chart.point().position('year*value')
  .size(4)
  .shape('circle')
  .style({
    stroke: '#fff',
    lineWidth: 1
  });
chart.render();

　　

圖像如下：

方法2：在geom中添加tooltip屬性，返回處理后的結果，並且在chart的tooltip中自定義模板

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 }
];
const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 500
});
chart.source(data);
chart.scale('value', {
  min: 0
});
chart.scale('year', {
  range: [ 0, 1 ]
});
chart.tooltip({
  crosshairs: {
    type: 'line'
  },
    showTitle: false,
    itemTpl: '<li><span>年份: {year}</span><br><span>產量: {yield}</span></li>'
});
chart.line().position('year*value').tooltip('year*value',function(year,value){
  /**
  *此處也可以添加數據處理語句
  */
  return {
    year:year+'年',
    yield:value+'億噸',
  }
});
chart.point().position('year*value')
  .size(4)
  .shape('circle')
  .style({
    stroke: '#fff',
    lineWidth: 1
  }).tooltip('year*value',function(year,value){
  /**
  *此處也可以添加數據處理語句
  */
  return {
    year:year+'年',
    yield:value+'億噸',
  }
});
chart.render();

　

圖像如下：

方法3：若數據源經過了transform的fold轉換，有些情況下前兩種方法可能就不會適用了，因為在數據轉換前，格式是{ year: '1996', north: 322, south: 162 },

在經過fold轉換后，格式為{"year": "1996","type": "north","value": 322}，{"year": "1996","type": "south","value": 162}

此時已經無法為north和south設置別名了，這時我們可以在fold轉換前在進行一次rename轉換。

const { DataView } = DataSet;
const data = [
  { year: '1996', north: 322, south: 162 },
  { year: '1997', north: 324, south: 90 },
  { year: '1998', north: 329, south: 50 },
  { year: '1999', north: 342, south: 77 },
  { year: '2000', north: 348, south: 35 },
  { year: '2001', north: 334, south: -45 },
  { year: '2002', north: 325, south: -88 },
  { year: '2003', north: 316, south: -120 },
  { year: '2004', north: 318, south: -156 },
  { year: '2005', north: 330, south: -123 },
  { year: '2006', north: 355, south: -88 },
  { year: '2007', north: 366, south: -66 },
  { year: '2008', north: 337, south: -45 },
  { year: '2009', north: 352, south: -29 },
  { year: '2010', north: 377, south: -45 },
  { year: '2011', north: 383, south: -88 },
  { year: '2012', north: 344, south: -132 },
  { year: '2013', north: 366, south: -146 },
  { year: '2014', north: 389, south: -169 },
  { year: '2015', north: 334, south: -184 }
];
// 數據需要加工成 {year: '1996', type: 'north', value: 50} 的模式
const dv = new DataView().source(data);
dv.transform({
  type:'rename',
  map:{
    north:'北方',
  	south:'南方',
  }
})
dv.transform({
  type: 'fold',
  fields: [ '北方', '南方' ], // 展開字段集
  key: 'type',                  // key字段
  value: 'value'               // value字段
});

const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 500
});
chart.source(dv, {
  year: {
    range: [ 0, 1 ]
  }
});
chart.tooltip({
  crosshairs: {
    type: 'line'
  }
});
chart.area().position('year*value').color('type');
chart.line().position('year*value').color('type')
  .size(2);
chart.render();

圖像如下：

目前發現了這三種方法，若有其他更好的方法，請留言，共同學習