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

谁践踏了优雅 2023-01-02 10:29 1195阅读 0赞

### 使用antv/g2的心得 ###

山中无老虎，猴子称霸王

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]  
这些图表共同点都很明确，

*  都是多线或单线折线图
 *  每条线都有一个渐变的面积图
 *  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()`的第一个参数是图例的分割维度，第二个参数是设置图例的颜色，可传入一个颜色数组，也可以是一个颜色。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]

除此之外还有一种方式在一个图表上添加多个图例  
那就是多次调用 `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

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

下面的这个是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}
 // RI
 const 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) : ki
 newI.type = ki
 chartItem.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: number
    	value: number
    	type: 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',
    ])

主要这样写有一个不太好的地方就是，渐变色的数组匹配的原则是第一个渐变色对应第一个图例，如果图例的数据不是有序的，就比较麻烦了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]

#### 自定义legend ####

自定义legend 是指这里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4]  
主要使用`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][api]

#### 自定义tooltip ####

自定义tooltip是指这一部分的内容进行自定义  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 5]

一般会在数值后添加单位，比如**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 || type
 return { 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;"> {type}: {value} </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 ][Antv_g2]  
[官方文档][Link 1]  
[GitHub仓库][GitHub]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221119/a4b68e6983784152b1f751240b83cbbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221119/78d0d09e7ed74d50afd0bd340ec916d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 2]: /images/20221119/c76cecd5b0274e1f8400d8ecd9adb546.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 3]: /images/20221119/88d61a7d8fb848c383e56013e7b70db8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 4]: /images/20221119/c7615450c6ea46ac9f9768226aed4b0e.png
[api]: https://g2.antv.vision/zh/docs/api/general/legend
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 5]: /images/20221119/268c1481c91b45db86c7345d82785651.png
[Antv_g2]: https://www.yuque.com/antv/g2-docs
[Link 1]: https://g2.antv.vision/zh/docs/api/general/chart
[GitHub]: https://github.com/antvis/g2