封装antv/g2折线图所遇到的问题及解决办法

使用antv/g2的心得

山中无老虎，猴子称霸王

最近在项目中做了一个监控模块的功能，大致流程就是后端调用普罗米修斯的接口，获得k8s pod， container，node, workload, cluster的一些监控指标，如cpu使用率，内存使用率，网络出入，磁盘使用，API Server 延迟与请求次数.
图表如下图。

这些图表共同点都很明确，

• 都是多线或单线折线图
• 每条线都有一个渐变的面积图
• x横坐标都是时间
• 只有一个纵坐标y

基于以上共同点，抽取公共部分封装成组件是最好的开发方式。
于是乎，组件的封装开始了。
图表库用的是 antv/g2

图表数据源的决定

要想做在图表上做折线图和面积图 主要是用 chart.line() 与 chart.area()

chart.line().position('x*y')chart.area().position('x*y')

这里的position 支持使用key 可以是用索引， 即可以这样写，

const data = [{ month: 'May',  temperature: 18.4 },{ month: 'Jun',  temperature: 21.5 },
]
chart.data(data);
chart.line().position('month*temperature')

也可以这样写

const data = [['May',  18.4 ], { 'Jun', 21.5 },
]
chart.data(data);
chart.line().position('0*1')

显然第一种方式更具有语义化，也更优雅，第二种写法虽然官方支持，但官方例子中没有这样写的。

此外如果一个图表如果有多个折线或者多个图例的话，是使用color()方法

如此写

const data = [{ month: 'Jan', city: 'Tokyo', temperature: 7 },{ month: 'Jan', city: 'London', temperature: 3.9 },{ month: 'Feb', city: 'Tokyo', temperature: 6.9 },{ month: 'Feb', city: 'London', temperature: 4.2 },{ month: 'Mar', city: 'Tokyo', temperature: 9.5 },{ month: 'Mar', city: 'London', temperature: 5.7 },{ month: 'Apr', city: 'Tokyo', temperature: 14.5 },
]
chart.data(data);
chart.line().position('month*temperature').color('city').shape('smooth');

color()方法传入数据源data的一个key，这样就会出现图表上就有二条线， 如图。 color()的第一个参数是图例的分割维度，第二个参数是设置图例的颜色，可传入一个颜色数组，也可以是一个颜色。

除此之外还有一种方式在一个图表上添加多个图例
那就是多次调用 line()方法

const data = [{ month: 'Jan', Tokyo: 7,  London： 3.9 },{ month: 'Feb', Tokyo: 8,  London： 3.2 },{ month: 'Mar', Tokyo: 9,  London： 3.1 },  
]
chart.data(data);
chart.line().position('month*Tokyo')chart.line().position('month*London')

后一种数据量会少很多，但性能不太好。

普罗米修斯数据结构转化成图表可用数据源

普罗米修斯返回的数据结构是比较复杂的，下面是一个接口返回的数据格式

{"code": "1","payload": {"metric": "node_load_union","data": [{"name": "node_load1","result": [{"metric": {"kubernetes_node": "as-config-5-copy-isodtc18"},"values": [[1609846140,"0.04"],[1609846740,"0.01"],[1609847340,"0.23"],[1609847940,"0.16"]]}]},{"name": "node_load5","result": [{"metric": {"kubernetes_node": "as-config-5-copy-isodtc18"},"values": [[1609846140,"0.17"],[1609846740,"0.05"],[1609847340,"0.07"],[1609847940,"0.09"]]}]},{"name": "node_load15","result": [{"metric": {"kubernetes_node": "as-config-5-copy-isodtc18"},"values": [[1609846140,"0.13"],[1609846740,"0.1"],[1609847340,"0.07"],[1609847940,"0.06"]]}]}]},"success": true
}

数组values 是一个监控指标的数据，内部的每一个元素又都是一个数组，这个数组的第一个元素是以秒为单位的时间戳。第二元素是这个时间点的监控到的值。类型为字符串，有可能是NaN

这种数据格式是不能直接用于图表的，所有需要写个方法进行转化。
于是就有了下面这个方法

const res = {code: '1',payload: {metric: 'apiserver_request_by_verb_latencies',data: [{metricName: 'DELETE',result: [{metric: {verb: 'DELETE',},values: [[1608851497, 'NaN'],[1608853297, 'NaN'],[1608855097, 'NaN'],[1608856897, 'NaN'],[1608858697, 'NaN'],[1608860497, 'NaN'],[1608862297, 'NaN'],[1608864097, 'NaN'],[1608865897, 'NaN'],],},],},{metricName: 'GET',result: [{metric: {verb: 'GET',},values: [[1608851497, '64.49999999999979'],[1608853297, '49.5'],[1608855097, '49.5'],[1608856897, '49.49999999999999'],[1608858697, '49.7345971563981'],[1608860497, '49.5'],[1608862297, '49.5'],[1608864097, '49.50000000000001'],[1608865897, '49.7345971563981'],],},],},{metricName: 'PATCH',result: [{metric: {verb: 'PATCH',},values: [[1608851497, '49.50000000000001'],[1608853297, '49.50000000000001'],[1608855097, '49.50000000000001'],[1608856897, '49.50000000000001'],[1608858697, '49.50000000000001'],[1608860497, '49.50000000000001'],[1608862297, '49.50000000000001'],[1608864097, '49.50000000000001'],[1608865897, '49.50000000000001'],],},],},{metricName: 'POST',result: [{metric: {verb: 'POST',},values: [[1608851497, '49.5'],[1608853297, '49.5'],[1608855097, '49.5'],[1608856897, '49.5'],[1608858697, '49.5'],[1608860497, '49.5'],[1608862297, '49.50000000000001'],[1608864097, '49.5'],[1608865897, '49.5'],],},],},{metricName: 'PUT',result: [{metric: {verb: 'PUT',},values: [[1608851497, '49.5'],[1608853297, '49.50000000000001'],[1608855097, '49.50000000000001'],[1608856897, '49.5'],[1608858697, '49.5'],[1608860497, '49.5'],[1608862297, '49.5'],[1608864097, '49.5'],[1608865897, '49.50000000000001'],],},],},],},success: true,
}// function lessNum() {
//   const data = res.payload.data
//   const keys = data.map(x => x.metricName)
//   const len = data[0].result[0].values.length//   // 第一种遍历 遍历次数 values.length * keys.length
//   for (let i = 0; i < len; i++) {
//     const field = {}
//     for (let q = 0; q < keys.length; q++) {
//       const metricName = keys[q]
//       const [time, value] = data[q].result[0].values[i]
//       field.time = time
//       field[metricName] = value
//     }
//     // console.log(field)
//   }
// }function moreNum() {const data = res.payload.dataconst keys = data.map(x => x.metricName)const len = data[0].result[0].values.length// 第一种遍历 遍历次数 values.length * keys.lengthfor (let i = 0; i < len; i++) {for (let q = 0; q < keys.length; q++) {const field = {}const metricName = keys[q]const [time, value] = data[q].result[0].values[i]field.time = timefield.type = metricNamefield.value = valueconsole.log(field)}}
}moreNum()

下面的这个是ts版

/*** 监控数据格式转化* @param originObject 接口获取的原始数据{value1:[[],[]], value2:[[],[]]}* @return Array<Object> 接口获取的原始数据[{time, type, value},{time, type, value},]*/
export function transformData(originObject: originObjectD): Array<Field> {const chartDataArr: Field[] = []Object.keys(originObject).forEach(k => {const item = originObject[k]item.forEach(inItem => {const value: number = inItem[1] === 'NaN' ? 0 : parseFloat(inItem[1])chartDataArr.push({time: inItem[0] * 1000,type: 'value',value: toFixedNum(value, 3),})})})return chartDataArr
}/*** 新方法 数组数据转化* @param data [{name, result: [{metric,values}]},{name, result: [{metric,values}]}]* @returns res [{time, value, type}]*/
export function newManyArrTone(data: OriginArrayData[]): Array<Field> {const chartItem: Field[] = []const newData: any = {}// result有可能是空data.forEach((dx: OriginArrayData) => {newData[dx.name] = dx.result.length > 0 ? dx.result[0].values : []})const keys = Object.keys(newData)if (keys.length === 0) {return chartItem}const item = newData[keys[0]]item.forEach((ix: [number, string], ii: number) => {keys.forEach(ki => {const newI: Field = {time: ix[0] * 1000}// RIconst tempValue: string = newData[ki][ii][1]const value: number = tempValue === 'NaN' ? 0 : parseFloat(tempValue)newI.value = toFixedNum(value, 3)ki = chartLineTypeConfig.has(ki) ? chartLineTypeConfig.get(ki) : kinewI.type = kichartItem.push(newI)})})return chartItem
}// 处理一个图表接口返回的数据，转化为可用于图表使用的格式
// 返回的数组中的对象有这三个值，time，type，value
export function newHandleOneChartData(res: MonitorResponse): Field[] {let chartItem: Field[] = [] // 一个图表的数据let params: {[key: string]: [number, string][]}// 多线图if (isArray(res.payload.data)) {chartItem.push(...newManyArrTone(res.payload.data))} else {// 单线图const values =res.payload.data.result.length > 0? res.payload.data.result[0].values: []params = {values}chartItem = transformData(params)}return chartItem
}// 格式化二位小数
export function toFixedNum(val: number, num: number = 2): number {if (val === 0) {return 0}return parseFloat(val.toFixed(num))
}

此方法值千金，赶快一键三连。

调用方法就是直接将监控接口的返回值res直接传入，输出的就是一个图表可直接用的数据
最终图表的数据源采用的是 这种

interface data {time: numbervalue: numbertype: any
}

time为x轴的时间，y轴为value，type用于区分不同的图例。ok

到这里准备工作就差不多了，这里说的其实很简单了，其实整个过程我走了很多弯路，二种数据格式，二种图表实现方式我都在不停地切换。有此得出的结论是，动手之前一定要多多多多看文档，多动手。

封装折线图渐变面积图

基于g2的图形语法，渐变的面积图很好做，

chart.area({connectNulls: false}).position('time*value').tooltip(false).color('type', ['l(100) 0:#206EF7FF 1:#206EF700','l(100) 0:#29C9EAFF 1:#29C9EA00','l(100) 0:#722ED1FF 1:#722ED100','l(100) 0:#FF4383FF 1:#FF438300','l(100) 0:#FFBF00FF 1:#FFBF0000',
])

主要这样写有一个不太好的地方就是，渐变色的数组匹配的原则是第一个渐变色对应第一个图例，如果图例的数据不是有序的，就比较麻烦了。

自定义legend

自定义legend 是指这里

主要使用legend()方法

const legendItem = [{name: '1分钟',value: 'node_load1',marker: {symbol: 'circle',style: {fill: '#206EF7FF', r: 5},},},{name: '5分钟',value: 'node_load5',marker: {symbol: 'circle', style: {fill: '#29C9EAFF', r: 5}},},{name: '15分钟',value: 'node_load15',marker: {symbol: 'circle', style: {fill: '#5A77A7FF', r: 5}},},],chart.legend({position: 'top-right',offsetY: 4,offsetX: -10,items: legendItem,})

注意一点就是颜色要与折线，面积的颜色对应
相关api

自定义tooltip

自定义tooltip是指这一部分的内容进行自定义

一般会在数值后添加单位，比如London 15.2℃
此外就是将London改成中文 伦敦
使用的方法是这个

 chart.line({connectNulls: false}).position('time*value').color('type', lineColor).tooltip('value*type', function(value: any, type: any) {value = value + '' + (props.chartYunit || '')type = props.tooltipName || typereturn {value, type}})chart.tooltip({showCrosshairs: true,shared: true,// 定义辅助线内容模板itemTpl: `<li class="g2-tooltip-list-item" style="list-style-type: none; padding: 0px; margin: 12px 0px;"><span class="g2-tooltip-marker" style="background:{color}; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px;"></span><span class="g2-tooltip-name">{type}</span>:<span class="g2-tooltip-value" style="display: inline-block; margin-left: 10px;">{value}</span></li>`,})

调用tooltip()方法将模板中需要的数据传入模板，就可以itemTpl使用了

第一次点击lenged筛选图例，发生位移

当lenged设置offsetY, offsetX 时，第一次点击会发生位移，这个问题官方已经在4.1.x解决了。

双倍tooltip的解决办法

不知道是不是我的是否方法有误，在显示辅助线tooltip的时候显示了双倍的元素，这样

这是因为你既调用了line() 又调用了area（）方法导致的。
在调用area()是调用.tooltip(false) 即可.

 chart.area({connectNulls: false}).position('time*value').tooltip(false).color('type', areaColor)

x轴为时间戳时需要注意的几点

如果x轴为时间戳的话一定要是以毫秒为单位的时间戳，我们后端调用普罗米修斯返回的时间戳是以秒为单位，需要乘以1000。
如下图配置

 chart.scale('time', {type: 'time',tickCount: 7,maxTickCount: 7,mask: 'MM-DD HH:mm:ss',})

x轴的刻度为7个，但貌似会动态改变。此外mask是在x轴显示的日期格式， 不会自动更改。
真烦，该动态改变的不变，不该动态改变的非要改变。

语雀文档Antv/g2
官方文档
GitHub仓库