diff --git a/lib/charts/line.js b/lib/charts/line.js index 22f9330..c2ccec6 100644 --- a/lib/charts/line.js +++ b/lib/charts/line.js @@ -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; -}); \ No newline at end of file +}); diff --git a/lib/datav.js b/lib/datav.js index 93cbfd4..21816fe 100644 --- a/lib/datav.js +++ b/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 = $("
").css({ + node = $("").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) {