平滑数组-图表运用

发表于

起因

最近做了一个页面,都是由图表构成的,UI设计图上的图表一般都比较美观,但是实际做出来的图表观感却一点也不好看,究其原因,是真实数据之间的差异过大,导致使用echarts画出来的图表效果很差,对于不同的图表类型,可以使用特定的方法,比如可配置最小角度,最小宽度等尽量去减小差异,但是我们这里需要绘制的是一个南丁格尔玫瑰图,echarts
的配置项通读下来,发现也没有较好的解决方法,为了解决这一问题,我还尝试了去使用highcharts图表库,但是效果也不是很好。

关于这一问题,网上分成两派,一种是尽量通过某种手段消减数据之间差异过大导致图表不好看的问题
二是认为这就是数据的真实表现,如果采取手段会产生误解问题

解决

在这里,我不去关注图表工具库提供的功能,而是转而去关注数据本身,只要我们的数据是’合理’的,那么绘制出来的图不也是’合理’的了吗?

‘降噪’

如果我的数据源本身就是抖动不大的,那么出来的效果肯定也是观感较好的,那么如何去做呢?

这里我们需要找一个权重数,这个权重数我们取值为average(arr) * alpha,这里的意思是取所有数集合的平均值然后乘以权重系数alpha,我们要让这个权重数对每个数起影响, 可以取这个数和权重数的平均值

但是这样还不够,我们还要加上其他数来一起来构成影响因子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function smoothArray(numArr, alpha) {
  const weighted = average(numArr) * alpha
  const len = numArr.length
  const smoothed = []
  for (const i in numArr) {
    const curr = numArr[i]
    const prev = smoothed[i - 1] || numArr[len-1]
    const next = curr || numArr[0]
    const improved = Number(average([weighted, prev, curr, next]).toFixed(2))
    smoothed.push(improved)
  }
}

function average(data) {
  return sum(data) / data.length // sum求和函数
}

smoothArray([1,2,3,4,5,6,7,8,9], 0.85)

无处理数组

稍微平滑数组

完全平滑数组

效果

平滑处理前

平滑处理后