插件窝 资源共享 雷达图生成插件

雷达图生成插件

免费下载 雷达图 27    2019-09-30

demo地址:http://www.chajianwo.com/plugin/leidatu/index.html

一. 使用方法:

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 使用radarChart.init()方法构建雷达图:

radarChart.init(jsDomElement, options);

譬如:

radarChart.init(document.querySelector("#radar1"), {
    data: {
        maxValue: [100, 100, 100, 100, 100, 200],
        value: [30, 20, 40, 20, 100, 22],
        description: ["第一名", "第二名", "第三名", "第四名", "第五名", "第六名"],
        tooltipsString: function(description, value, maxVlaue) {
            return "排名:" + description + "<br>" + "分数:" + value + "<br>" + "最高分: " + maxVlaue;
        }
    },
    config: {
        scale: 0.6
    }
});

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

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

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

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

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

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

2.1 options参数中,data对象的属性值如下:

参数类型说明是否必填默认值
maxValueArray数据值的最大值。如:[100, 100, 100, 100, 100]。可选
valueArray雷达图配置信息对象可选
descriptionArray雷达图配置信息对象可选
tooltipsStringFunction或Stringtooltip的文字信息。当该参数类型为String时,直接显示该文字。当参数类型为Function时,该函数有3个默认参数,分别是description、value、maxVlaue,即:数据描述信息、数据值、数据最大值。需要在该函数中返回String。例如,function(description, value, maxVlaue) {return description + "
" + value + "
" + maxVlaue}。
可选

2.2 options参数中,config对象的属性值如下:

参数类型说明是否必填默认值
showTooltipBoolean是否显示气泡框。为true则显示气泡框。如:[100, 100, 100, 100, 100]。可选true
radiusInt雷达图的半径。可选
originArray中心位置[x, y]。可选构建元素的中心位置
scaleFloat雷达图的放大倍数。取值范围为0~1。可选1
bgObject雷达背景图配置。可选
dataLineObject数据线条的样式配置。可选
dataCircleObject数据点圆圈的样式配置。可选
tooltipObjecttooltip的样式配置。可选

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

bg对象的属性值如下:

参数类型说明是否必填默认值
layerInt雷达图的绘制层数。可选7
evenFillStyleString偶数层的填充样式。如:"red"、"#ccc"。可选"#fff"
oddFillStyleString奇数层的填充样式。可选"#eee"
evenStrokeStyleString偶数层的描边样式。可选"#ddd"
oddStrokeStyleString奇数层的填充样式。可选"#ddd"

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

dataLine参数的属性值有:

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

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

dataCircle对象的属性值有:

参数类型说明是否必填默认值
rInt圆圈半径。可选5
strokeStyleString圆圈描边样式。可选"red"
fillStyleInt圆圈填充样式。可选3
lineWidthInt圆圈线条宽度。可选"#fff"

2.2.4 config参数对象的属性:tooltip对象

tooltip对象的属性值有:

参数类型说明是否必填默认值
offsetXInt圆圈半径。可选0
offsetYInt圆圈描边样式。可选0
rInt圆圈填充样式。可选数据点圆圈的半径