陈文管的博客

分享有价值的内容

AntV Chart绘制内存和CPU曲线

发布 | 最近更新于

AntV G2是蚂蚁金服数据可视化团队开发的一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。这边记录下用AntV Chart实现Android内存和CPU性能数据的展示。

AntV 官网图表示例：

https://antv.antfin.com/zh-cn/g2/3.x/demo/index.html

一、实现效果预览

AntV图表绘制CPU曲线

二、AntV配置

在工程dependencies里面加上G2的配置，因为需要对传输的性能数据做转化，也要配置上DataSet。

"dependencies": {
  "@antv/data-set": "^0.11.1",
  "@antv/g2": "^4.0.12",
}

三、图表显示具体实现

布局中的配置：

div(id="performance" style='height:420px')

controller中的图表显示实现，先引入G2和DataSet的声明：

var G2 = require('@antv/g2')
var DataSet = require('@antv/data-set')

接着是接收到的数据转化，这边接收的性能数据是Key-Value的形式，要显示CPU和内存各两条曲线，需要转化成AntV图表可以分类显示的数据格式，先拆分CPU和内存的数据为两份，接着分别对CPU和内存的数据用DataSet进行转化。

原始单元数据JSON字段结构：

{
    "app_cpu": 20.5,
    "app_memory": 466,
    "time": 1605770126637,
    "free_memory": 1419,
    "sys_cpu": 50.7
 }

用DateSet转化原始数据，下面是对拆分之后的CPU数据进行转化，内存数据的转化也是用同样的方式。

var cpuDataSet = new DataSet();
var cpuDataView = cpuDataSet.createView().source(cpuData);
// fold 方式完成了行列转换，如果不想使用 DataSet 直接手工转换数据即可
cpuDataView.transform({
  type: 'fold',
  fields: ['app_cpu', 'sys_cpu'], // 展开字段集
  key: 'type', // key字段
  value: 'cpu' // value字段
});
var transferCpuData = JSON.parse(cpuDataView.toString()) //转化之后的CPU数据集

转化之后的单元数据格式如下，这样图谱就是分app_cpu和sys_cpu两类曲线进行显示。

{
 "time": 1605939685476,
 "type": "app_cpu",
 "cpu": 38.9
}
{
 "time": 1605939678474,
 "type": "sys_cpu",
 "cpu": 55
}

接着就是把转化之后的数据填充到Chart图表就行了

var performanceChart = null
function showPerfChart(data) {
  if (performanceChart) {
      performanceChart.annotation().clear(true)
      performanceChart.clear()
  } else {
      performanceChart = new G2.Chart({
          container: 'performance',
          autoFit: true,
          height: 420,
          padding: [70, 70, 70, 70]
        })
  }
  chart.axis('time', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
    }
  });
  // 格式化CPU坐标轴刻度点的文本显示，配置显示单位‘%’
  chart.axis('cpu', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(val) {
        return val + '%';
      }
    }
  });
  // 格式化内存坐标轴刻度点的文本显示，配置显示单位‘MB’
  chart.axis('memory', {
    label: {
      textStyle: {
        fill: '#aaaaaa'
      },
      formatter: function formatter(val) {
        return val + 'MB';
      }
    }
  });
  // 配置鼠标移动到图表上显示的tooltip辅助线
  chart.tooltip({
    crosshairs: {
      type: 'line'
    },
    shared: true,
  });
  // 配置图例显示在图表顶部
  chart.legend({
    position: 'top'
  });
  chart.scale({
    time: {
      alias: '时间点(S)',
      type: 'time',
      range: [0.01, 1],
      mask: 'MM-DD hh:mm:ss', // 时间点X轴格式化时间戳显示
      nice: false
    },
    cpu: {
      alias: 'CPU(%)',
      min: 0,
      sync: true, // 将 cpu 字段数值同 time 字段数值进行同步
      nice: true,
    },
    memory: {
      alias: '内存(MB)',
      min: 0,
      sync: true,  // 将 memory 字段数值同 time 字段数值进行同步
      nice: true,
    },
  });
  chart.data(data) // 填充数据
  // 以时间戳为横坐标，CPU值为纵坐标配置CPU曲线的显示，根据type类型显示不同的颜色
  chart.line().position('time*cpu').color('type').shape('smooth'); 
  chart.line().position('time*memory').color('type').shape('smooth');
  chart.render(); // 渲染绘制图表
}

实现效果预览只展示了CPU曲线，要显示内存曲线只需要在调用showPerfChart的数据中加入time、memory及不同type字段值的数据元组就行。

比如$scope.cpuList存储的CPU的数据，$scope.memoryList存储内存的数据，只需要showPerfChart($scope.cpuList.concate.($scope.memoryList))就可以一起显示CPU和内存的数据，点击图表上方的图例可以切换隐藏对应的曲线。

用AntV Chart显示相比HighCharts的缺点是在清空之后填充数据会有明显的先变空白再刷新显示数据的现象。

扩展阅读：

AngularJS集成HighCharts动态绘制CPU和内存变化曲线

转载请注明出处：陈文管的博客 – AntV Chart绘制内存和CPU曲线

扫码或搜索：文呓

博客公众号

微信公众号 扫一扫关注