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

拿我格子衫来

发布于 2022-01-24 16:04:04

1.5K0

发布于 2022-01-24 16:04:04

文章被收录于专栏：TopFE

使用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.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++) {
    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 = time
      field.type = metricName
      field.value = value
      console.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}
      // 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',
])

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

自定义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 || 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;">
       <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仓库

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

unix

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

unix

编程算法

登录后参与评论

0 条评论

热度