archive-gh-me/datavjs
1
0
Fork 0
mirror of https://github.com/TBEDP/datavjs.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

Fix line chart x axis issue

Browse Source
This commit is contained in:
Jackson Tian 2013-02-05 16:45:51 +08:00
parent d9438ff153
commit f2dba96db6
1 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/charts/line.js
View File

@ -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);
}
}