Skip to content

增加未实现的功能 #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zzz999 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

增加未实现的功能 #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
97ec773
gitignore
imkiven May 12, 2017
ea42e53
add column tooltips functions
imkiven May 12, 2017
5bb49d1
hua0.1
wzjg521 May 12, 2017
f44594a
hua0.2
wzjg521 May 12, 2017
d3afa2d
add dashed
May 12, 2017
212d3b9
Merge remote-tracking branch 'origin/master'
May 12, 2017
67d3b3f
delete superfluous update
May 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
build.sh
node_modules/
/.history/
/.vscode/
11 changes: 1 addition & 10 deletions dist/wxcharts-min.js
View file
Open in desktop

Large diffs are not rendered by default.

116 changes: 68 additions & 48 deletions dist/wxcharts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ var config = {
columePadding: 3,
fontSize: 10,
dataPointShape: ['diamond', 'circle', 'triangle', 'rect'],
colors: ['#7cb5ec', '#f7a35c', '#434348', '#90ed7d', '#f15c80', '#8085e9'],
colors: ['#266a99', '#fa9a00', 'green', '#ce1d31', '#73d2fd', '#8085e9'],
pieChartLinePadding: 25,
pieChartTextPadding: 15,
xAxisTextPadding: 3,
Expand Down Expand Up @@ -346,40 +346,38 @@ function findRadarChartCurrentIndex(currentPoints, radarData, count) {
var eachAngleArea = 2 * Math.PI / count;
var currentIndex = -1;
if (isInExactPieChartArea(currentPoints, radarData.center, radarData.radius)) {
(function () {
var fixAngle = function fixAngle(angle) {
if (angle < 0) {
angle += 2 * Math.PI;
}
if (angle > 2 * Math.PI) {
angle -= 2 * Math.PI;
}
return angle;
};

var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
angle = -1 * angle;
var fixAngle = function fixAngle(angle) {
if (angle < 0) {
angle += 2 * Math.PI;
}
if (angle > 2 * Math.PI) {
angle -= 2 * Math.PI;
}
return angle;
};

var angleList = radarData.angleList.map(function (item) {
item = fixAngle(-1 * item);
var angle = Math.atan2(radarData.center.y - currentPoints.y, currentPoints.x - radarData.center.x);
angle = -1 * angle;
if (angle < 0) {
angle += 2 * Math.PI;
}

return item;
});
var angleList = radarData.angleList.map(function (item) {
item = fixAngle(-1 * item);

angleList.forEach(function (item, index) {
var rangeStart = fixAngle(item - eachAngleArea / 2);
var rangeEnd = fixAngle(item + eachAngleArea / 2);
if (rangeEnd < rangeStart) {
rangeEnd += 2 * Math.PI;
}
if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) {
currentIndex = index;
}
});
})();
return item;
});

angleList.forEach(function (item, index) {
var rangeStart = fixAngle(item - eachAngleArea / 2);
var rangeEnd = fixAngle(item + eachAngleArea / 2);
if (rangeEnd < rangeStart) {
rangeEnd += 2 * Math.PI;
}
if (angle >= rangeStart && angle <= rangeEnd || angle + 2 * Math.PI >= rangeStart && angle + 2 * Math.PI <= rangeEnd) {
currentIndex = index;
}
});
}

return currentIndex;
Expand All @@ -388,18 +386,16 @@ function findRadarChartCurrentIndex(currentPoints, radarData, count) {
function findPieChartCurrentIndex(currentPoints, pieData) {
var currentIndex = -1;
if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) {
(function () {
var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
if (angle < 0) {
angle += 2 * Math.PI;
var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x);
if (angle < 0) {
angle += 2 * Math.PI;
}
angle = 2 * Math.PI - angle;
pieData.series.forEach(function (item, index) {
if (angle > item._start_) {
currentIndex = index;
}
angle = 2 * Math.PI - angle;
pieData.series.forEach(function (item, index) {
if (angle > item._start_) {
currentIndex = index;
}
});
})();
});
}

return currentIndex;
Expand Down Expand Up @@ -983,7 +979,17 @@ function drawYAxisTitle(title, opts, config, context) {
context.closePath();
context.restore();
}

function dashedLineTodashedLineTo(context, x, y, startX, startY, dashLength) {
dashLength = dashLength === 0 || dashLength === undefined ? dashLength = 5 : dashLength = dashLength;
//这个this就是context哈

//线段数量
var dashNum = Math.floor(Math.sqrt(Math.pow(startX - x, 2) + Math.pow(startY - y, 2)) / dashLength);
for (var i = 0; i < dashNum; i++) {
context[i % 2 === 0 ? "moveTo" : "lineTo"](startX + i * (x - startX) / dashNum, startY + i * (y - startY) / dashNum);
}
context.stroke();
}
function drawColumnDataPoints(series, opts, config, context) {
var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;

Expand All @@ -997,11 +1003,13 @@ function drawColumnDataPoints(series, opts, config, context) {
var minRange = ranges.pop();
var maxRange = ranges.shift();
var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight;
var calPoints = [];

series.forEach(function (eachSeries, seriesIndex) {
var data = eachSeries.data;
var points = getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config, process);
points = fixColumeData(points, eachSpacing, series.length, seriesIndex, config, opts);
calPoints.push(points);

// 绘制柱状数据图
context.beginPath();
Expand All @@ -1025,8 +1033,10 @@ function drawColumnDataPoints(series, opts, config, context) {
drawPointText(points, eachSeries, config, context);
}
});

return xAxisPoints;
if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) {
drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context);
}
return { xAxisPoints: xAxisPoints, calPoints: calPoints };
}

function drawAreaDataPoints(series, opts, config, context) {
Expand Down Expand Up @@ -1299,7 +1309,11 @@ function drawYAxis(series, opts, config, context) {
context.setLineWidth(1);
points.forEach(function (item, index) {
context.moveTo(startX, item);
context.lineTo(endX, item);
if (opts.yAxis.lineType === 'dashed') {
dashedLineTodashedLineTo(context, endX, item, startX, item);
} else {
context.lineTo(endX, item);
}
});
context.closePath();
context.stroke();
Expand Down Expand Up @@ -1407,7 +1421,7 @@ function drawPieDataPoints(series, opts, config, context) {
}
series.forEach(function (eachSeries) {
context.beginPath();
context.setLineWidth(2);
context.setLineWidth(1);
context.setStrokeStyle('#ffffff');
context.setFillStyle(eachSeries.color);
context.moveTo(centerPosition.x, centerPosition.y);
Expand All @@ -1425,7 +1439,7 @@ function drawPieDataPoints(series, opts, config, context) {
innerPieWidth = Math.max(0, radius - opts.extra.ringWidth);
}
context.beginPath();
context.setFillStyle('#ffffff');
context.setFillStyle('#111c24');
context.moveTo(centerPosition.x, centerPosition.y);
context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI);
context.closePath();
Expand Down Expand Up @@ -1675,7 +1689,13 @@ function drawCharts(type, opts, config, context) {
onProcess: function onProcess(process) {
drawYAxis(series, opts, config, context);
drawXAxis(categories, opts, config, context);
_this.chartData.xAxisPoints = drawColumnDataPoints(series, opts, config, context, process);

var _drawColumnDataPoints = drawColumnDataPoints(series, opts, config, context, process),
xAxisPoints = _drawColumnDataPoints.xAxisPoints,
calPoints = _drawColumnDataPoints.calPoints;

_this.chartData.xAxisPoints = xAxisPoints;
_this.chartData.calPoints = calPoints;
drawLegend(opts.series, opts, config, context);
drawCanvas(opts, context);
},
Expand Down Expand Up @@ -1831,7 +1851,7 @@ Charts.prototype.getCurrentDataIndex = function (e) {
Charts.prototype.showToolTip = function (e) {
var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

if (this.opts.type === 'line' || this.opts.type === 'area') {
if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') {
var index = this.getCurrentDataIndex(e);
var opts = assign({}, this.opts, { animation: false });
if (index > -1) {
Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@
"devDependencies": {
"babel-plugin-external-helpers": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"rollup": "^0.41.6",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-uglify": "^1.0.1"
"rollup-plugin-uglify": "^1.0.1",
"rollup-watch": "^3.2.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "rollup -c --watch",
"build": "rollup -c && rollup --config rollup.config.prod.js"
},
"repository": {
Expand Down
3 changes: 1 addition & 2 deletions src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { assign } from './util/polyfill/index';
import drawCharts from './components/draw-charts';
import Event from './util/event';
import { findCurrentIndex, findRadarChartCurrentIndex, findPieChartCurrentIndex, getSeriesDataItem, getToolTipData } from './components/charts-data'

let Charts = function(opts) {
opts.title = opts.title || {};
opts.subtitle = opts.subtitle || {};
Expand Down Expand Up @@ -61,7 +60,7 @@ Charts.prototype.getCurrentDataIndex = function (e) {
}

Charts.prototype.showToolTip = function (e, option = {}) {
if (this.opts.type === 'line' || this.opts.type === 'area') {
if (this.opts.type === 'line' || this.opts.type === 'area' || this.opts.type === 'column') {
let index = this.getCurrentDataIndex(e);
let opts = assign({}, this.opts, {animation: false});
if (index > -1) {
Expand Down
4 changes: 3 additions & 1 deletion src/components/draw-charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ export default function drawCharts (type, opts, config, context) {
onProcess: (process) => {
drawYAxis(series, opts, config, context);
drawXAxis(categories, opts, config, context);
this.chartData.xAxisPoints = drawColumnDataPoints(series, opts, config, context, process);
let { xAxisPoints, calPoints } = drawColumnDataPoints(series, opts, config, context, process);
this.chartData.xAxisPoints = xAxisPoints;
this.chartData.calPoints = calPoints;
drawLegend(opts.series, opts, config, context);
drawCanvas(opts, context);
},
Expand Down
Loading