利用D3.js绘制雷达图

JavaScript04

利用D3.js绘制雷达图,第1张

d3.js绘制雷达图,如果各个指标维度的比例尺一致,相对容易,主要难点在于多个维度的比例尺不统一的情况下,如何绘制?

(1)各个指标维度比例尺一致,比如一个人多门功课的成绩雷达图,通过设置一个统一的domain=【0, 100】,range=【0, radius】,做好映射即可。如下图所示:

(2)各个指标维度比例尺不一致,比如一个人的体温、身高、体重、心率、视力等维度,如果按照同一比例尺来绘制,可想而知,某些指标维度无法很好展现出来。目前解决办法是:固定domain=【0, radius】,然后将各个维度数据进行转换换算到【0, radius】范围内的数值。如下:

(3)如何在雷达图中绘制一个环形范围。例如需要在一个人的各项指标定义一个最高值和最低值组成的一个环形范围,这里主要通过areaRadial来绘制,定义innerRadius和outerRadius即可形成一个环状范围,如下:

如下图所示:

公司需求的时候,做了一种线形图,根据数值的大小,变换颜色。示例图如下:

产品经理问我,可以不可以做出这样的。设计图如下:

因为才使用这个插件一天,也不是很熟悉,感觉原理应该差不多。就答应了下来。

(自己挖坑 = =! )

等真正做的时候,发现事情并没有这么简单。。

后来的做法:把itemStyle提了出去,与data同级

我以为到这里已经结束了。

BUT。。。

当我把console.log换成return的时候。遍历数组,总是根据数组第一个值返回对应颜色,下面的不执行了,并把所有的拐点设置为第一个值符合的颜色。

简单来说,就是 雷达图的颜色只接受一个参数

既然一组数据只能用一种颜色,我在绘制这个数组的时候,先做个遍历:

一个图表 设置三层覆盖

预览地址

chart.js是一款基于HTML5 Canvas的图表插件,chart.js的功能非常强大,它不仅提供了常见的柱形图、折线图、饼状图,而且还提供了环形图、雷达图,样式外观多样,图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动...