mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
update line.js
change node hover mode change XAxis to xAis add gridColor to options add unchosenOpacity to options add gridOpacity to options add chosenGridOpacity to options
This commit is contained in:
Theseue
parent
7091179789
commit
fed08c07f7
@ -45,17 +45,17 @@
|
||||
this.defaults.hasMackLine = true;
|
||||
this.defaults.hasXAxis = true;
|
||||
this.defaults.hasYAxis = true;
|
||||
this.defaults.XAxisTick = 10;
|
||||
this.defaults.YAxisTick = 4;
|
||||
this.defaults.XAxisOrient = "bottom";
|
||||
this.defaults.YAxisOrient = "left";
|
||||
this.defaults.XAxisPadding = 10;
|
||||
this.defaults.YAxisPadding = 10;
|
||||
this.defaults.XAxisDomain = [];
|
||||
this.defaults.YAxisDomain = [];
|
||||
this.defaults.XAxisFontSize = 10;
|
||||
this.defaults.YAxisFontSize = 10;
|
||||
this.defaults.YAxisStartDy = 20;
|
||||
this.defaults.xAxisTick = 10;
|
||||
this.defaults.yAxisTick = 4;
|
||||
this.defaults.xAxisOrient = "bottom";
|
||||
this.defaults.yAxisOrient = "left";
|
||||
this.defaults.xAxisPadding = 10;
|
||||
this.defaults.yAxisPadding = 10;
|
||||
// this.defaults.xAxisDomain = [];
|
||||
// this.defaults.yAxisDomain = [];
|
||||
this.defaults.xAxisFontSize = 10;
|
||||
this.defaults.yAxisFontSize = 10;
|
||||
this.defaults.yAxisStartDy = 20;
|
||||
this.defaults.hasXGrid = true;
|
||||
this.defaults.hasYGrid = true;
|
||||
|
||||
@ -63,7 +63,11 @@
|
||||
this.defaults.titleColor = "#000";
|
||||
this.defaults.subtitleColor = "#000";
|
||||
this.defaults.AxisColor = "#000";
|
||||
this.defaults.gridColor = "#efefef";
|
||||
// this.defaults.gridColor = "#efefef";
|
||||
this.defaults.gridColor = "#000";
|
||||
this.defaults.unchosen0pacity = 0.15;
|
||||
this.defaults.grid0pacity = 0.1;
|
||||
this.defaults.chosenGrid0pacity = 0.2;
|
||||
|
||||
//设置用户指定属性
|
||||
this.setOptions(options);
|
||||
@ -189,15 +193,16 @@
|
||||
if (conf.hasXAxis) {
|
||||
var axisColor = conf.AxisColor;
|
||||
var gridColor = conf.gridColor;
|
||||
var grid0pacity = conf.grid0pacity;
|
||||
var hasDataTitle = conf.hasDataTitle;
|
||||
var XAxisPadding = conf.XAxisPadding;
|
||||
var xAxisPadding = conf.xAxisPadding;
|
||||
var margin = conf.margin;
|
||||
var startX = margin[3];
|
||||
var startY = conf.height - margin[2];
|
||||
var xWidth = this.xWidth;
|
||||
var maxLength = this.maxLength;
|
||||
var yHeight = this.yHeight;
|
||||
var fontSize = conf.XAxisFontSize;
|
||||
var fontSize = conf.xAxisFontSize;
|
||||
|
||||
var tickLength;
|
||||
if (conf.hasXGrid) {
|
||||
@ -206,7 +211,7 @@
|
||||
tickLength = 5;
|
||||
}
|
||||
|
||||
var tick = conf.XAxisTick;
|
||||
var tick = conf.xAxisTick;
|
||||
var tickStep;
|
||||
if (tick % maxLength === 0) {
|
||||
tickStep = xWidth / tick;
|
||||
@ -216,21 +221,23 @@
|
||||
}
|
||||
|
||||
var xAxis = canvas.set();
|
||||
var xGrid = canvas.set();
|
||||
var xAxisText = canvas.set();
|
||||
xAxis.push(canvas.path("M" + startX + "," + startY + "L" + (startX + xWidth) + "," + startY));
|
||||
|
||||
var l = titles.length;
|
||||
for (var i = 0; i < tick; i++) {
|
||||
xAxis.push(canvas.path("M" + (startX + i * tickStep) + "," + startY + "L" + (startX + i * tickStep) + "," + (startY - tickLength))
|
||||
.attr({"stroke": gridColor}));
|
||||
xGrid.push(canvas.path("M" + (startX + i * tickStep) + "," + startY + "L" + (startX + i * tickStep) + "," + (startY - tickLength)));
|
||||
if (hasDataTitle && i < l - 1) {
|
||||
xAxisText.push(canvas.text((startX + i * tickStep), startY + XAxisPadding, titles[i + 1]));
|
||||
xAxisText.push(canvas.text((startX + i * tickStep), startY + xAxisPadding, titles[i + 1]));
|
||||
}
|
||||
}
|
||||
|
||||
xAxis.attr({fill: axisColor, "stroke-width":2});
|
||||
xAxis.attr({fill: axisColor, "stroke-width": 2});
|
||||
xGrid.attr({"stroke": gridColor, "stroke-width": 2, "stroke-opacity": grid0pacity});
|
||||
xAxisText.attr({"font-size": fontSize});
|
||||
this.xAxis = xAxis;
|
||||
this.xGrid = xGrid;
|
||||
this.xAxisText = xAxisText;
|
||||
this.xTick = xWidth / maxLength;
|
||||
}
|
||||
@ -246,18 +253,19 @@
|
||||
if (conf.hasYAxis) {
|
||||
var axisColor = conf.AxisColor;
|
||||
var gridColor = conf.gridColor;
|
||||
var grid0pacity = conf.grid0pacity;
|
||||
var margin = conf.margin;
|
||||
var YAxisStartDy = conf.YAxisStartDy;
|
||||
var yHeight = this.yHeight - YAxisStartDy;
|
||||
var yAxisStartDy = conf.yAxisStartDy;
|
||||
var yHeight = this.yHeight - yAxisStartDy;
|
||||
var xWidth = this.xWidth;
|
||||
var startX = margin[3];
|
||||
var startY = margin[0] + yHeight;
|
||||
var YAxisPadding = conf.YAxisPadding;
|
||||
var yAxisPadding = conf.yAxisPadding;
|
||||
var max = this.max;
|
||||
var min = this.min;
|
||||
var fontSize = conf.YAxisFontSize;
|
||||
var fontSize = conf.yAxisFontSize;
|
||||
|
||||
var tick = conf.YAxisTick;
|
||||
var tick = conf.yAxisTick;
|
||||
var tickStep = yHeight / tick;
|
||||
|
||||
var d = (max - min) % (tick - 1);
|
||||
@ -274,19 +282,21 @@
|
||||
}
|
||||
|
||||
var yAxis = canvas.set();
|
||||
var yGrid = canvas.set();
|
||||
var yAxisText = canvas.set();
|
||||
var dx =
|
||||
yAxis.push(canvas.path("M" + startX + "," + (startY + YAxisStartDy) + "L" + startX + "," + (startY - yHeight)));
|
||||
yAxis.push(canvas.path("M" + startX + "," + (startY + yAxisStartDy) + "L" + startX + "," + (startY - yHeight)));
|
||||
|
||||
for (var i = 0; i < tick; i++) {
|
||||
yAxis.push(canvas.path("M" + startX+ "," + (startY - i * tickStep) + "L" + (startX + tickLength) + "," + (startY - i * tickStep))
|
||||
.attr({"stroke": gridColor}));
|
||||
yAxisText.push(canvas.text(startX - YAxisPadding, (startY - i * tickStep), (min + i * d)));
|
||||
yGrid.push(canvas.path("M" + startX + "," + (startY - i * tickStep) + "L" + (startX + tickLength) + "," + (startY - i * tickStep)));
|
||||
yAxisText.push(canvas.text(startX - yAxisPadding, (startY - i * tickStep), (min + i * d)));
|
||||
}
|
||||
|
||||
yAxis.attr({fill: axisColor, "stroke-width":2});
|
||||
yAxis.attr({fill: axisColor, "stroke-width": 2});
|
||||
yGrid.attr({"stroke": gridColor, "stroke-width": 2, "stroke-opacity": grid0pacity});
|
||||
yAxisText.attr({"font-size": fontSize});
|
||||
this.yAxis = yAxis;
|
||||
this.yGrid = yGrid;
|
||||
this.yAxisText = yAxisText;
|
||||
this.yHeight = yHeight;
|
||||
|
||||
@ -343,7 +353,7 @@
|
||||
var yHeight = this.yHeight;
|
||||
var x0 = conf.margin[3];
|
||||
var y0 = this.y0;
|
||||
var YAxisStartDy = conf.YAxisStartDy;
|
||||
var yAxisStartDy = conf.yAxisStartDy;
|
||||
var radius = conf.nodeRadius;
|
||||
|
||||
var j, l;
|
||||
@ -397,16 +407,20 @@
|
||||
var chosen = this.chosen;
|
||||
var chosenNum = this.chosenNum;
|
||||
var lines = this.lines;
|
||||
var uo = conf.unchosen0pacity;
|
||||
var nodesList = this.nodesList;
|
||||
var xGrid = this.xGrid;
|
||||
var grid0pacity = conf.grid0pacity;
|
||||
var cgo = conf.chosenGrid0pacity;
|
||||
var xAxisText = this.xAxisText;
|
||||
var XAxisFontSize = conf.XAxisFontSize;
|
||||
var xAxisFontSize = conf.xAxisFontSize;
|
||||
|
||||
var highLight = function (num) {
|
||||
var line = lines[num];
|
||||
lines.attr({"stroke-opacity": 0.2});
|
||||
lines.attr({"stroke-opacity": uo});
|
||||
|
||||
nodesList.forEach(function (d) {
|
||||
d.attr({"fill-opacity": 0.2});
|
||||
d.attr({"fill-opacity": uo});
|
||||
});
|
||||
|
||||
line.attr({"stroke-opacity": 1}).toFront();
|
||||
@ -474,17 +488,25 @@
|
||||
nodesList.forEach(function (d) {
|
||||
d.forEach (function (d) {
|
||||
if (hoverMode) {
|
||||
var nodeNum = d.data('num');
|
||||
d.mouseover(function () {
|
||||
d.animate({r: (radius + 2) * 2}, 100);
|
||||
xAxisText[d.data('num')].animate({'font-size': XAxisFontSize * 2}, 100);
|
||||
xGrid[nodeNum].animate({'stroke-opacity': cgo}, 100);
|
||||
xAxisText[nodeNum].animate({'font-size': xAxisFontSize * 2}, 100);
|
||||
floatTag.html('<div style="text-align: center;margin:auto;color:#ffffff">' + d.data('data') + '</div>');
|
||||
floatTag.css({"visibility": "visible"});
|
||||
if (!chosen) {
|
||||
highLight(d.data("lineNum"));
|
||||
nodesList.forEach(function (d) {
|
||||
if (nodeNum < d.length) {
|
||||
d[nodeNum].attr({"fill-opacity": 1});
|
||||
}
|
||||
});
|
||||
}
|
||||
}).mouseout(function () {
|
||||
d.animate({r: radius * 2}, 100);
|
||||
xAxisText[d.data('num')].animate({'font-size': XAxisFontSize}, 100);
|
||||
xGrid[nodeNum].animate({'stroke-opacity': grid0pacity}, 100);
|
||||
xAxisText[nodeNum].animate({'font-size': xAxisFontSize}, 100);
|
||||
floatTag.css({"visibility": "hidden"});
|
||||
if (!chosen) {
|
||||
unhighLinght();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user