哦,这个 我作为学习记录,发出来勉励自己,哈哈哈哦~~~
目标:展示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 的存储空间,请君自行补齐