封装antv/g2折线图所遇到的问题及解决办法 |
您所在的位置：网站首页 › 绘制可视化图表遇到的困难及解决方法 › 封装antv/g2折线图所遇到的问题及解决办法 |
封装antv/g2折线图所遇到的问题及解决办法
|
使用antv/g2的心得
山中无老虎，猴子称霸王 最近在项目中做了一个监控模块的功能，大致流程就是后端调用普罗米修斯的接口，获得k8s pod， container，node, workload, cluster的一些监控指标，如cpu使用率，内存使用率，网络出入，磁盘使用，API Server 延迟与请求次数. 图表如下图。
基于以上共同点，抽取公共部分封装成组件是最好的开发方式。 于是乎，组件的封装开始了。 图表库用的是 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 { 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 { 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 是指这里 注意一点就是颜色要与折线，面积的颜色对应 相关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: ` {type}: {value} `, })调用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仓库 |
这些图表共同点都很明确，
主要使用legend()方法
【本文地址】
今日新闻 |
推荐新闻 |