利用差值计算模拟折线数据,让折线图看起来更真实

85 阅读1分钟

哦,这个 我作为学习记录,发出来勉励自己,哈哈哈哦~~~

目标:展示30天内,交易量的波动,要求能展示每分钟的具体数值

第三方库:

<script src="https://unpkg.com/lodash@4.17.15/lodash.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

直接随机数效果是这样的 【low~~~】

经过改良后,通过差值模拟后效果是这样的【nice】

很明显,第二算法看起来波动更加真实,每个点都是渐进式升高或降低,在小范围内有轻微数值浮动,而第一张图的数值,明显的忽高忽低,上下值波动非常没有规律,以下是实现的算法过程

//第一步:先随机出来30天每个小时的波动值
//当然你也可以先随机出每天的波动值在算1/4每小时的差值,这里就这么定了 
 for (let i = 0; i < 30; i++) {
    for (let inner = 0; inner < 24*4; inner++) {
      points.push(_.random(_.random(46, 50), 66));//给一个随机下线,给一个指定上限
    }
  }

 



//第二步:计算差值
 points.forEach((point, index) => {
    if (!points[index + 1]) {
      return;
    }
    var nextV = points[index + 1];
    var stepV =( nextV - point) / 15;//计算下个值和当前值数值差,然后算出每分钟的平均值
    for (var i = 0; i < 15; i++) {//一个片段为15分钟
      //这里计算差值
      var pointStepV = stepV * i;//算出当前分钟的差值
      point += stepV;//加上基础固定下限值显示更急真实
      data.push((point+ _.random(0, 3))*x);//加入一个0~3的随机数,营造一个波动的小范围,如果不加随机值线条会变得平滑 x是倍数,这里为了让数额变得更大,可以不关心
    }

  })

//第三步:echart  hightchart xxxchart 我就不浪费oschina 的存储空间,请君自行补齐