mirror of
https://github.com/TBEDP/datavjs.git
synced 2025-12-08 19:45:52 +00:00
Jackson Tian
commit
c31841c086
@ -7,7 +7,6 @@
|
||||
}
|
||||
})('Line', function (require) {
|
||||
var DataV = require('DataV');
|
||||
var theme = DataV.Themes;
|
||||
|
||||
/**
|
||||
* Line构造函数，继承自Chart
|
||||
@ -37,8 +36,8 @@
|
||||
* - `yAxisFontSize 数字，y轴说明文字字号，默认值为10
|
||||
* - `xAxisStartDx 数字，x轴刻度起始位置与坐标轴最左端水平距离，默认值为20
|
||||
* - `yAxisStartDy 数字，y轴刻度起始位置与坐标轴最下端垂直距离，默认值为10
|
||||
* - `xAxisEndDx 数字，x轴刻度起始位置与坐标轴最右端水平距离，默认值为10
|
||||
* - `yAxisEndDy 数字，y轴刻度起始位置与坐标轴最上端水平距离，默认值为10
|
||||
* - `xAxisEndDx 数字，x轴刻度结束位置与坐标轴最右端水平距离，默认值为10
|
||||
* - `yAxisEndDy 数字，y轴刻度结束位置与坐标轴最上端水平距离，默认值为10
|
||||
* - `textLean 布尔值，是否将x轴说明文字倾斜摆放，默认值为false
|
||||
* - `hasXGrid 布尔值，是否需要绘制与x坐标轴平行的网格线，默认值为true
|
||||
* - `hasYGrid 布尔值，是否需要绘制与x坐标轴平行的网格线，默认值为true
|
||||
@ -50,9 +49,8 @@
|
||||
* - `unchosen0pacity 数字，当有折线被选中时，其他淡出折线的透明度，默认值为0.15
|
||||
* - `grid0pacity 数字，网格线透明度，默认值为0.1
|
||||
* - `chosenGrid0pacity 数字，高亮网格线透明度，默认值为0.5
|
||||
|
||||
* Create line in a dom node with id "chart", width is 500px; height is 600px;
|
||||
* Examples:
|
||||
* Create line in a dom node with id "chart", width is 500px; height is 600px;
|
||||
* ```
|
||||
* var line = new Line("chart", {"width": 500, "height": 600});
|
||||
* ```
|
||||
@ -177,7 +175,6 @@
|
||||
var lines = _.groupBy(dataTable, map.line);
|
||||
var linesData = [];
|
||||
|
||||
var max, min;
|
||||
var maxList = [], minList = [];
|
||||
this.maxLength = Math.max.apply(null, _.map(lines, function (line) {
|
||||
return line.length;
|
||||
@ -252,14 +249,9 @@
|
||||
tickLength = 5;
|
||||
}
|
||||
|
||||
var tick = conf.xAxisTick;
|
||||
var tickStep;
|
||||
if (tick % maxLength === 0) {
|
||||
tickStep = xDataArea / (tick - 1);
|
||||
} else {
|
||||
tickStep = xDataArea / (this.maxLength - 1);
|
||||
tick = this.maxLength;
|
||||
}
|
||||
// 当内容少于刻度数量时，用内容的数量作为刻度数量
|
||||
var tick = Math.min(maxLength, conf.xAxisTick);
|
||||
var tickStep = xDataArea / (tick - 1);
|
||||
|
||||
var xAxis = canvas.set();
|
||||
var xGrid = canvas.set();
|
||||
@ -270,13 +262,14 @@
|
||||
for (var i = 0; i < tick; i++) {
|
||||
xGrid.push(canvas.path("M" + (startX + i * tickStep) + "," + startY + "L" + (startX + i * tickStep) + "," + (startY - tickLength)));
|
||||
if (i < l) {
|
||||
var thisText = canvas.text((startX + i * tickStep), startY + xAxisPadding, titles[i]);
|
||||
// 绘制横坐标上的文字
|
||||
var text = canvas.text((startX + i * tickStep), startY + xAxisPadding, titles[i]);
|
||||
if (textLean) {
|
||||
var d = thisText.getBBox().width / 2;
|
||||
var d = text.getBBox().width / 2;
|
||||
var angle = 45 / 360 * Math.PI;
|
||||
thisText.transform("r45t" + Math.cos(angle) * d + "," + Math.sin(angle) * d);
|
||||
text.transform("r45t" + Math.cos(angle) * d + "," + Math.sin(angle) * d);
|
||||
}
|
||||
xAxisText.push(thisText);
|
||||
xAxisText.push(text);
|
||||
}
|
||||
}
|
||||
|
||||
@ -586,4 +579,4 @@
|
||||
};
|
||||
|
||||
return Line;
|
||||
});
|
||||
});
|
||||
|
||||
28
lib/datav.js
28
lib/datav.js
@ -584,14 +584,19 @@
|
||||
* 浮动标签
|
||||
*/
|
||||
DataV.FloatTag = function () {
|
||||
var mouseToFloatTag = {x: 20, y: 20};
|
||||
var setContent = function () {};
|
||||
var node;
|
||||
var container;
|
||||
//set floatTag location, warning: the html content must be set before call this func,
|
||||
// because jqNode's width and height depend on it's content;
|
||||
var _changeLoc = function (m) {
|
||||
//m is mouse location, example: {x: 10, y: 20}
|
||||
var x = m.x;
|
||||
var y = m.y;
|
||||
var floatTagWidth = jqNode.outerWidth();
|
||||
var floatTagHeight = jqNode.outerHeight();
|
||||
var floatTagWidth = node.outerWidth ? node.outerWidth() : node.width();
|
||||
var floatTagHeight = node.outerHeight ? node.outerHeight() : node.height();
|
||||
|
||||
if (floatTagWidth + x + 2 * mouseToFloatTag.x <= $(container).width()) {
|
||||
x += mouseToFloatTag.x;
|
||||
} else {
|
||||
@ -602,8 +607,8 @@
|
||||
} else {
|
||||
y += mouseToFloatTag.y;
|
||||
}
|
||||
jqNode.css("left", x + "px");
|
||||
jqNode.css("top", y + "px");
|
||||
node.css("left", x);
|
||||
node.css("top", y);
|
||||
};
|
||||
var _mousemove = function (e) {
|
||||
var offset = $(container).offset();
|
||||
@ -615,14 +620,9 @@
|
||||
_changeLoc({'x': x, 'y': y});
|
||||
};
|
||||
|
||||
var mouseToFloatTag = {x: 20, y: 20};
|
||||
var setContent = function () {};
|
||||
var jqNode;
|
||||
var container;
|
||||
|
||||
var floatTag = function (cont) {
|
||||
container = $(cont);
|
||||
jqNode = $("<div/>").css({
|
||||
node = $("<div/>").css({
|
||||
"border": "1px solid",
|
||||
"border-color": $.browser.msie ? "rgb(0, 0, 0)" : "rgba(0, 0, 0, 0.8)",
|
||||
"background-color": $.browser.msie ? "rgb(0, 0, 0)" : "rgba(0, 0, 0, 0.75)",
|
||||
@ -632,16 +632,16 @@
|
||||
"font-size": "12px",
|
||||
"box-shadow": "3px 3px 6px 0px rgba(0,0,0,0.58)",
|
||||
"font-familiy": "宋体",
|
||||
"z-index": 10000,
|
||||
"z-index": 1000,
|
||||
"text-align": "center",
|
||||
"visibility": "hidden",
|
||||
"position": "absolute"
|
||||
});
|
||||
container.append(jqNode);
|
||||
container.append(node);
|
||||
container.on('mousemove', _mousemove);
|
||||
container.on('tap', _mousemove);
|
||||
jqNode.creator = floatTag;
|
||||
return jqNode;
|
||||
node.creator = floatTag;
|
||||
return node;
|
||||
};
|
||||
|
||||
floatTag.setContent = function (sc) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user