用canvas实现一个雷达图

Jean

发布于 2021-06-16 17:00:48

1.4K10

代码可运行

文章被收录于专栏：Web行业观察Web行业观察

运行总次数：0

代码可运行

很久以前写的一个雷达图工具，在前端运行，可以绘制各种各样的雷达图，非常适合新手学习。

一. 使用方法：

1.1 引入组件资源

需要在页面中首先引入radarChart.js和radarChart.css：

<link rel="stylesheet" type="text/css" href="radarChart.css">

<script type="text/javascript" src="radarChart.js"></script>

2.2 使用RADAR.init()方法构建雷达图：

// element是一个div元素(可分配宽高)
RADAR.init(element, options);

譬如：

RADAR.init(document.querySelector('#draw'), {
            data: {
                maxValue: [100, 100, 100, 100, 100, 100, 100],
                inner: [{
                    value: [40, 20, 60, 70, 100, 60, 100],
                    strokeStyle: 'blue',
                    fillStyle: "blue",
                    fillColor: 'transparent',
                    lineWidth: 1
                }, {
                    value: [30, 10, 40, 35, 100, 30, 90],
                    strokeStyle: 'yellow',
                    fillStyle: "yellow",
                    fillColor: 'transparent',
                    lineWidth: 1

                }, {
                    value: [10, 0, 40, 35, 50, 20, 50],
                    strokeStyle: 'black',
                    fillStyle: "black",
                    fillColor: 'transparent',
                    lineWidth: 1

                }],
                description: ["JavaScript", "Node.js", "MongoDB", "express", "selenium", "electron", "ES6,7"]
            },
            config: {
                scale: 1,
                showTooltip: false,
                tooltip: {
                    offsetY: 0,
                    offsetX: 0,
                    r: 5
                },
                dataCircle: {
                    r: 5,
                    fillStyle: "transparent",
                },
                bg: {
                    layer: 8,
                    evenFillStyle: "#fefefe",
                    oddFillStyle: "#ddd",
                    axisColor: "black"
                },
                radius: 250
            }
        });

使用radarChart.init()方法可以构建新的雷达图。

二. radarChart.init()的参数说明：

**radarChart.init(jsDomElement, options)**方法接受两个参数，分别是：

参数	类型	说明	是否必填
element	JS原生DOM元素	雷达图构造元素	必填
options	Object	雷达图配置信息对象	必填

在radarChart.init()方法中，options参数对象的属性值如下：

参数	类型	说明	是否必填
data	Object	雷达图的原始数据集合对象	必填
config	Object	雷达图的样式配置信息对象	可选

2.1 options参数中，data对象的属性值如下：

参数	类型	说明	是否必填	默认值
maxValue	Array	数据值的最大值。如：[100, 100, 100, 100, 100]。该项的长度决定了雷达图的边数	必选	无
description	Array	雷达图配置信息对象	可选	无
tooltipsString	Function或String	tooltip的文字信息。当该参数类型为String时，直接显示该文字。当参数类型为Function时，该函数有3个默认参数，分别是description、value、maxVlaue，即：数据描述信息、数据值、数据最大值。需要在该函数中返回String。例如，function(description, value, maxVlaue) {return description + "" + value + "" + maxVlaue}。	可选	无

2.1.1 data参数对象的中的成员：inner对象：

inner对象的属性值如下：

参数	类型	说明	是否必填	默认值
name	String	雷达图的绘制层数。	必选
value	Array	每一个内多边形的各个数据点(长度需与maxValue一致)	必选
lineColor	String	该环的颜色,包括线和点	可选	"black"
fillColor	String	该闭环的内部填充颜色(面)	可选	"black"
lineWidth	Int	线宽	可选	2

2.2 options参数中，config对象的属性值如下：

参数	类型	说明	是否必填	默认值
showTooltip	Boolean	是否显示气泡框。为true则显示气泡框。如：[100, 100, 100, 100, 100]。	可选	true
radius	Int	雷达图的半径。	可选	无
origin	Array	中心位置[x, y]。	可选	构建元素的中心位置
scale	Float	雷达图的放大倍数。取值范围为0~1。	可选	1
bg	Object	雷达背景图配置。	可选	无
dataLine	Object	数据线条的样式配置。	可选	无
dataCircle	Object	数据点圆圈的样式配置。	可选	无
tooltip	Object	tooltip的样式配置。	可选	无

2.2.1 config参数对象的属性：bg对象：

bg对象的属性值如下：

参数	类型	说明	是否必填	默认值
layer	Int	雷达图的绘制层数。	可选	7
evenFillStyle	String	偶数层的填充样式。如："red"、"#ccc"。	可选	"#fff"
oddFillStyle	String	奇数层的填充样式。	可选	"#eee"
axisColor	String	雷达主轴的颜色	可选	"rgba(0,0,0,0.5)"

2.2.2 config参数对象的属性：dataLine对象：

dataLine参数的属性值有：

参数	类型	说明	是否必填	默认值
strokeStyle	Int	线条样式。	可选	"red"
lineWidth	String	线条宽度。	可选	2

2.2.3 config参数对象的属性：dataCircle对象：

dataCircle对象的属性值有：v

参数	类型	说明	是否必填	默认值
r	Int	圆圈半径。	可选	5
strokeStyle	String	圆圈描边样式。	可选	"red"
fillStyle	Int	圆圈填充样式。	可选	3
lineWidth	Int	圆圈线条宽度。	可选	"#fff"