mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
radar chart
This commit is contained in:
xie cong
parent
5aef035a0c
commit
2548b21625
@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Radar Chart</title>
|
||||
@ -11,7 +10,7 @@
|
||||
seajs.config({
|
||||
alias: {
|
||||
'DataV': '/lib/datav.js',
|
||||
'Radar': '/lib/charts/radar.js'
|
||||
'Radar': '/lib/charts/radar.js'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -16,6 +16,18 @@
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* Options:
|
||||
*
|
||||
* - `width` 数字，图片宽度，默认为800，表示图片高800px
|
||||
* - `height` 数字，图片高度，默认为800
|
||||
* - `legend` 布尔值，图例是否显示，默认为 true, 显示；设为false则不显示
|
||||
* - `radius` 数字，雷达图半径，默认是画布高度的40%
|
||||
*
|
||||
* Examples:
|
||||
* create Radar Chart in a dom node with id "chart", width is 500; height is 600px;
|
||||
* ```
|
||||
* var radar = new Radar("chart", {"width": 500, "height": 600});
|
||||
* ```
|
||||
* @param {Object} container 表示在html的哪个容器中绘制该组件
|
||||
* @param {Object} options 为用户自定义的组件的属性，比如画布大小
|
||||
*/
|
||||
@ -23,7 +35,6 @@
|
||||
type: "Radar",
|
||||
initialize: function (container, options) {
|
||||
this.node = this.checkContainer(container);
|
||||
this.groups = [];
|
||||
this.click = 0;
|
||||
this.clickedNum = 0;
|
||||
|
||||
@ -52,6 +63,7 @@
|
||||
this.defaults.radius = Math.min((this.defaults.width - this.defaults.xOffset), this.defaults.height) * 0.4;
|
||||
//创建画布
|
||||
this.createCanvas();
|
||||
this.groups = this.canvas.set();
|
||||
}
|
||||
});
|
||||
|
||||
@ -60,8 +72,7 @@
|
||||
*/
|
||||
Radar.prototype.createCanvas = function () {
|
||||
this.canvas = new Raphael(this.node, this.defaults.width, this.defaults.height);
|
||||
var canvasStyle = this.node.style;
|
||||
canvasStyle.position = "relative";
|
||||
this.node.style.position = "relative";
|
||||
this.floatTag = DataV.FloatTag()(this.node);
|
||||
this.floatTag.css({
|
||||
"visibility": "hidden"
|
||||
@ -98,15 +109,15 @@
|
||||
var sin = (conf.radius) * Math.sin(2 * Math.PI * i / lNum) * 0.9;
|
||||
var axis = paper.path("M,0,0,L," + cos + "," + sin).attr({
|
||||
'stroke-opacity': 0.5,
|
||||
'stroke-width': 1
|
||||
'stroke-width': 1
|
||||
});
|
||||
axis.data("x", cos).data("y", sin).transform("T" + (conf.radius + conf.xOffset) + "," + conf.radius);
|
||||
axises.push(axis);
|
||||
var axisText = paper.text().attr({
|
||||
"font-family": "Verdana",
|
||||
"font-size": 12,
|
||||
"text": this.allDimensions[i + 1],
|
||||
'stroke-opacity': 1
|
||||
"font-size": 12,
|
||||
"text": this.allDimensions[i + 1],
|
||||
'stroke-opacity': 1
|
||||
}).transform("T" + (conf.radius + cos + conf.xOffset) + "," + (conf.radius + sin));
|
||||
axisText.translate(axisText.getBBox().width * cos / 2 / conf.radius, axisText.getBBox().height * sin / 2 / conf.radius); // + "R" + (360 * i / lNum + 90)
|
||||
if (i === 0) {
|
||||
@ -119,30 +130,28 @@
|
||||
axisloopStr += "Z";
|
||||
paper.circle(conf.radius + conf.xOffset, conf.radius, conf.radius * 0.3).attr({
|
||||
'stroke-opacity': 0.5,
|
||||
'stroke-width': 1
|
||||
'stroke-width': 1
|
||||
});
|
||||
paper.circle(conf.radius + conf.xOffset, conf.radius, conf.radius * 0.6).attr({
|
||||
'stroke-opacity': 0.5,
|
||||
'stroke-width': 1
|
||||
'stroke-width': 1
|
||||
});
|
||||
paper.circle(conf.radius + conf.xOffset, conf.radius, conf.radius * 0.9).attr({
|
||||
'stroke-opacity': 0.5,
|
||||
'stroke-width': 1
|
||||
'stroke-width': 1
|
||||
});
|
||||
|
||||
var mouseOver = function () {
|
||||
if (!this.data('clicked')) {
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (d) {
|
||||
d.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
}
|
||||
var index = this.data('index');
|
||||
this.attr({
|
||||
'stroke-width': 5,
|
||||
'stroke-opacity': 1
|
||||
'stroke-opacity': 1
|
||||
}).toFront();
|
||||
that.underBn[index].attr({
|
||||
'opacity': 0.5
|
||||
@ -152,10 +161,8 @@
|
||||
var mouseOut = function () {
|
||||
if (!this.data('clicked')) {
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (d) {
|
||||
d.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
} else {
|
||||
this.attr({
|
||||
@ -173,16 +180,14 @@
|
||||
var index = this.data('index');
|
||||
if (!this.data('clicked')) {
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (d) {
|
||||
d.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
}
|
||||
this.attr({
|
||||
'fill': that.getColor(index),
|
||||
'stroke-opacity': 1,
|
||||
'fill-opacity': 0.1
|
||||
'stroke-opacity': 1,
|
||||
'fill-opacity': 0.1
|
||||
}).toFront();
|
||||
that.underBn[index].attr({
|
||||
'opacity': 1
|
||||
@ -192,10 +197,8 @@
|
||||
} else {
|
||||
that.clickedNum--;
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (d) {
|
||||
d.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
} else {
|
||||
this.attr({
|
||||
@ -204,7 +207,7 @@
|
||||
}
|
||||
this.attr({
|
||||
'fill': "",
|
||||
'fill-opacity': 0
|
||||
'fill-opacity': 0
|
||||
});
|
||||
that.underBn[index].hide();
|
||||
this.data('clicked', false);
|
||||
@ -230,13 +233,9 @@
|
||||
pathStr += "Z";
|
||||
var loop = paper.path(pathStr).transform("T" + (conf.radius + conf.xOffset) + "," + conf.radius).attr({
|
||||
'stroke': that.getColor(i),
|
||||
'stroke-width': 2,
|
||||
'fill-opacity': 0
|
||||
}).data('name', source[i][allDimensions[0]])
|
||||
.data('index', i)
|
||||
.mouseover(mouseOver)
|
||||
.mouseout(mouseOut)
|
||||
.click(mouseClick);
|
||||
'stroke-width': 2,
|
||||
'fill-opacity': 0
|
||||
}).data('name', source[i][allDimensions[0]]).data('index', i).mouseover(mouseOver).mouseout(mouseOut).click(mouseClick);
|
||||
groups.push(loop);
|
||||
};
|
||||
|
||||
@ -302,7 +301,6 @@
|
||||
*/
|
||||
Radar.prototype.setSource = function (source) {
|
||||
//source is 2-dimension array
|
||||
|
||||
var conf = this.defaults;
|
||||
this.allDimensions = source[0];
|
||||
|
||||
@ -400,26 +398,26 @@
|
||||
//底框
|
||||
underBn.push(paper.rect(legendArea[0] + 10, legendArea[1] - 17 - (20 + 3) * i, 190, 20).attr({
|
||||
"fill": "#ebebeb",
|
||||
"stroke": "none"
|
||||
"stroke": "none"
|
||||
}).hide());
|
||||
//色框
|
||||
paper.rect(legendArea[0] + 10 + 3, legendArea[1] - 6 - (20 + 3) * i - 6, 16, 8).attr({
|
||||
"fill": this.getColor(i),
|
||||
"stroke": "none"
|
||||
"stroke": "none"
|
||||
});
|
||||
//文字
|
||||
paper.text(legendArea[0] + 10 + 3 + 16 + 8, legendArea[1] - 10 - (20 + 3) * i, this.groups[i].data('name')).attr({
|
||||
"fill": "black",
|
||||
"fill-opacity": 1,
|
||||
"font-family": "Verdana",
|
||||
"font-size": 12,
|
||||
"text-anchor": "start"
|
||||
"fill-opacity": 1,
|
||||
"font-family": "Verdana",
|
||||
"font-size": 12,
|
||||
"text-anchor": "start"
|
||||
});
|
||||
//选框
|
||||
rectBn.push(paper.rect(legendArea[0] + 10, legendArea[1] - 16 - (20 + 3) * i, 180, 20).attr({
|
||||
"fill": "white",
|
||||
"fill-opacity": 0,
|
||||
"stroke": "none"
|
||||
"fill-opacity": 0,
|
||||
"stroke": "none"
|
||||
}));
|
||||
}
|
||||
rectBn.forEach(function (d, i) {
|
||||
@ -428,15 +426,13 @@
|
||||
if (!groups[i].data("clicked")) {
|
||||
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (dj) {
|
||||
dj.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
}
|
||||
groups[i].attr({
|
||||
'stroke-width': 5,
|
||||
'stroke-opacity': 1
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
underBn[i].attr('opacity', 0.5);
|
||||
underBn[i].show();
|
||||
@ -445,10 +441,8 @@
|
||||
if (!groups[i].data("clicked")) {
|
||||
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (dj) {
|
||||
dj.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
} else {
|
||||
groups[i].attr({
|
||||
@ -465,10 +459,8 @@
|
||||
if (groups[i].data('clicked')) {
|
||||
that.clickedNum--;
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (dj, j) {
|
||||
dj.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 1
|
||||
});
|
||||
} else {
|
||||
groups[i].attr({
|
||||
@ -477,23 +469,21 @@
|
||||
}
|
||||
groups[i].data('clicked', false).attr({
|
||||
'stroke-width': 2,
|
||||
'fill': "",
|
||||
'fill-opacity': 0
|
||||
'fill': "",
|
||||
'fill-opacity': 0
|
||||
});
|
||||
underBn[i].hide();
|
||||
} else {
|
||||
if (that.clickedNum === 0) {
|
||||
groups.forEach(function (dj, j) {
|
||||
dj.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
groups.attr({
|
||||
'stroke-opacity': 0.5
|
||||
});
|
||||
}
|
||||
groups[i].data('clicked', true).attr({
|
||||
'stroke-width': 5,
|
||||
'stroke-opacity': 1,
|
||||
'fill': that.getColor(i),
|
||||
'fill-opacity': 0.1
|
||||
'stroke-opacity': 1,
|
||||
'fill': that.getColor(i),
|
||||
'fill-opacity': 0.1
|
||||
}).toFront();
|
||||
underBn[i].attr({
|
||||
'opacity': 1
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user