From 7b036d5a29db49c64504dcef8f1913f9218f92a9 Mon Sep 17 00:00:00 2001 From: kener Date: Fri, 24 Jan 2014 00:47:07 +0800 Subject: [PATCH] =?UTF-8?q?boundaryGap=E7=95=99=E7=A9=BA=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=8D=87=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/categoryAxis.js | 80 +++++++++++++++++++++++++---------- src/config.js | 18 +++++--- 2 files changed, 68 insertions(+), 30 deletions(-) diff --git a/src/component/categoryAxis.js b/src/component/categoryAxis.js index 21cf93134..897b0f54e 100644 --- a/src/component/categoryAxis.js +++ b/src/component/categoryAxis.js @@ -236,24 +236,38 @@ define(function (require) { var axShape; //var data = option.data; var dataLength = option.data.length; - var length = option.axisTick.length; - var color = option.axisTick.lineStyle.color; - var lineWidth = option.axisTick.lineStyle.width; - + var tickOption = option.axisTick; + var length = tickOption.length; + var color = tickOption.lineStyle.color; + var lineWidth = tickOption.lineStyle.width; + var interval = tickOption.interval == 'auto' + ? _interval : (tickOption.interval - 0 + 1); + var onGap = tickOption.onGap; + var optGap = onGap + ? (getGap() / 2) + : typeof onGap == 'undefined' + ? (option.boundaryGap ? (getGap() / 2) : 0) + : 0; + if (option.position == 'bottom' || option.position == 'top') { // 横向 var yPosition = option.position == 'bottom' ? grid.getYend() : (grid.getY() - length); - for (var i = 0; i < dataLength; i++) { + var x; + for (var i = 0; i < dataLength; i += interval) { + // 亚像素优化 + x = self.subPixelOptimize( + getCoordByIndex(i) + optGap, lineWidth + ); axShape = { shape : 'line', zlevel : _zlevelBase, hoverable : false, style : { - xStart : getCoordByIndex(i), + xStart : x, yStart : yPosition, - xEnd : getCoordByIndex(i), + xEnd : x, yEnd : yPosition + length, strokeColor : color, lineWidth : lineWidth @@ -267,16 +281,21 @@ define(function (require) { var xPosition = option.position == 'left' ? (grid.getX() - length) : grid.getXend(); - for (var i = 0; i < dataLength; i++) { + var y; + for (var i = 0; i < dataLength; i += interval) { + // 亚像素优化 + y = self.subPixelOptimize( + getCoordByIndex(i) - optGap, lineWidth + ); axShape = { shape : 'line', zlevel : _zlevelBase, hoverable : false, style : { xStart : xPosition, - yStart : getCoordByIndex(i), + yStart : y, xEnd : xPosition + length, - yEnd : getCoordByIndex(i), + yEnd : y, strokeColor : color, lineWidth : lineWidth } @@ -400,12 +419,20 @@ define(function (require) { function _buildSplitLine() { var axShape; //var data = option.data; - var dataLength = option.data.length; - var lineType = option.splitLine.lineStyle.type; - var lineWidth = option.splitLine.lineStyle.width; - var color = option.splitLine.lineStyle.color; + var dataLength = option.data.length; + var sLineOption = option.splitLine; + var lineType = sLineOption.lineStyle.type; + var lineWidth = sLineOption.lineStyle.width; + var color = sLineOption.lineStyle.color; color = color instanceof Array ? color : [color]; var colorLength = color.length; + + var onGap = sLineOption.onGap; + var optGap = onGap + ? (getGap() / 2) + : typeof onGap == 'undefined' + ? (option.boundaryGap ? (getGap() / 2) : 0) + : 0; if (option.position == 'bottom' || option.position == 'top') { // 横向 @@ -416,7 +443,7 @@ define(function (require) { for (var i = 0; i < dataLength; i += _interval) { // 亚像素优化 x = self.subPixelOptimize( - getCoordByIndex(i), lineWidth + getCoordByIndex(i) + optGap, lineWidth ); axShape = { shape : 'line', @@ -445,7 +472,7 @@ define(function (require) { for (var i = 0; i < dataLength; i += _interval) { // 亚像素优化 y = self.subPixelOptimize( - getCoordByIndex(i), lineWidth + getCoordByIndex(i) - optGap, lineWidth ); axShape = { shape : 'line', @@ -468,12 +495,19 @@ define(function (require) { function _buildSplitArea() { var axShape; - var color = option.splitArea.areaStyle.color; + var sAreaOption = option.splitArea; + var color = sAreaOption.areaStyle.color; color = color instanceof Array ? color : [color]; var colorLength = color.length; //var data = option.data; var dataLength = option.data.length; - + + var onGap = sAreaOption.onGap; + var optGap = onGap + ? (getGap() / 2) + : typeof onGap == 'undefined' + ? (option.boundaryGap ? (getGap() / 2) : 0) + : 0; if (option.position == 'bottom' || option.position == 'top') { // 横向 var y = grid.getY(); @@ -483,7 +517,7 @@ define(function (require) { for (var i = 0; i <= dataLength; i += _interval) { curX = i < dataLength - ? getCoordByIndex(i) + ? (getCoordByIndex(i) + optGap) : grid.getXend(); axShape = { shape : 'rectangle', @@ -511,7 +545,7 @@ define(function (require) { for (var i = 0; i <= dataLength; i += _interval) { curY = i < dataLength - ? getCoordByIndex(i) + ? (getCoordByIndex(i) - optGap) : grid.getY(); axShape = { shape : 'rectangle', @@ -585,7 +619,7 @@ define(function (require) { ? grid.getWidth() : grid.getHeight(); if (option.boundaryGap) { // 留空 - return total / (dataLength + 1); + return total / dataLength; } else { // 顶头 return total / (dataLength > 1 ? (dataLength - 1) : 1); @@ -597,7 +631,7 @@ define(function (require) { var data = option.data; var dataLength = data.length; var gap = getGap(); - var position = option.boundaryGap ? gap : 0; + var position = option.boundaryGap ? (gap / 2) : 0; // Math.floor可能引起一些偏差，但性能会更好 for (var i = 0; i < dataLength; i++) { @@ -643,7 +677,7 @@ define(function (require) { } else { var gap = getGap(); - var position = option.boundaryGap ? gap : 0; + var position = option.boundaryGap ? (gap / 2) : 0; position += dataIndex * gap; if (option.position == 'bottom' diff --git a/src/config.js b/src/config.js index 557ee6268..08255f524 100644 --- a/src/config.js +++ b/src/config.js @@ -257,10 +257,12 @@ define(function() { } }, axisTick: { // 坐标轴小标记 - show: false, // 属性show控制显示与否，默认不显示 - length :4, // 属性length控制线长 + show: true, // 属性show控制显示与否，默认不显示 + interval: 'auto', + // onGap: null, + length :5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 - color: '#ccc', + color: '#333', width: 1 } }, @@ -276,6 +278,7 @@ define(function() { }, splitLine: { // 分隔线 show: true, // 默认显示，属性show控制显示与否 + // onGap: null, lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式 color: ['#ccc'], width: 1, @@ -284,6 +287,7 @@ define(function() { }, splitArea: { // 分隔区域 show: false, // 默认不显示，属性show控制显示与否 + // onGap: null, areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], type: 'default' @@ -313,9 +317,9 @@ define(function() { }, axisTick: { // 坐标轴小标记 show: false, // 属性show控制显示与否，默认不显示 - length :4, // 属性length控制线长 + length :5, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 - color: '#ccc', + color: '#333', width: 1 } }, @@ -588,7 +592,7 @@ define(function() { }, labelLine: { show: true, - length: 30, + length: 20, lineStyle: { // color: 各异, width: 1, @@ -879,7 +883,7 @@ define(function() { // -------内部通信 TOOLTIP_HOVER: 'tooltipHover' }, - + loadingText : 'Loading...', // 可计算特性配置，孤岛，提示颜色 calculable: false, // 默认关闭可计算特性 calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色 -- GitLab