Skip to content

Commit

Permalink
feat: basic tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@simaQ
simaQ committed Jan 12, 2018
1 parent 5b2ec6c commit 969f5c6
Show file tree
Hide file tree
Showing 16 changed files with 786 additions and 380 deletions.
20 changes: 7 additions & 13 deletions demos/area-gradient.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,6 @@
{month: 9, tem: 18.3, city: 'tokyo'},
{month: 10, tem: 13.9, city: 'tokyo'},
{month: 11, tem: 9.6, city: 'tokyo'}
/* { month: 12, tem: 0, city: 'newYork' },
{ month: 1, tem: 0.8, city: 'newYork' },
{ month: 2, tem: 5.7, city: 'newYork' },
{ month: 3, tem: 11.3, city: 'newYork' },
{ month: 4, tem: 17, city: 'newYork' },
{ month: 5, tem: 22, city: 'newYork' },
{ month: 6, tem: 24.8, city: 'newYork' },
{ month: 7, tem: 24.1, city: 'newYork' },
{ month: 8, tem: 20.1, city: 'newYork' },
{ month: 9, tem: 14.1, city: 'newYork' },
{ month: 10, tem: 8.6, city: 'newYork' },
{ month: 11, tem: 2.5, city: 'newYork' }
*/
];
const chart = new F2.Chart({
el: canvas
Expand All @@ -64,6 +51,13 @@
fontSize: 14
}
});
chart.tooltip({
showItemMarker: false,
background: {
fill: '#1890FF',
radius: 5
}
})
const linear_gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, 500);
linear_gradient.addColorStop(1, '#fff');
linear_gradient.addColorStop(0, 'rgb(15, 141, 232)');
Expand Down
30 changes: 17 additions & 13 deletions demos/area-stack.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@
fontSize: 14
}
});
chart.legend(false);
chart.tooltip({
showTitle: true
});
// chart.legend({
// position: 'right',
// marker: 'square',
Expand All @@ -84,19 +88,19 @@
// return '$' + val;
// }
// });
chart.legend('city', {
position: 'right',
marker(x, y, r, ctx) {
ctx.lineWidth = 2;
ctx.strokeStyle = ctx.fillStyle;
ctx.moveTo(x - r - 3, y);
ctx.lineTo(x + r + 3, y);
ctx.stroke();
ctx.arc(x, y, r - 1, 0, Math.PI * 2, false);
ctx.fill();
},
title: true
});
// chart.legend('city', {
// position: 'right',
// marker(x, y, r, ctx) {
// ctx.lineWidth = 2;
// ctx.strokeStyle = ctx.fillStyle;
// ctx.moveTo(x - r - 3, y);
// ctx.lineTo(x + r + 3, y);
// ctx.stroke();
// ctx.arc(x, y, r - 1, 0, Math.PI * 2, false);
// ctx.fill();
// },
// title: true
// });
// chart.filter('city', val => {
// return val !== 'tokyo';
// });
Expand Down
6 changes: 3 additions & 3 deletions demos/bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
pixelRatio: 2
});
chart.source(data);
// chart.coord({
// transposed: true
// });
chart.coord({
transposed: true
});
// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('city', {
label: {
Expand Down
4 changes: 2 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ require('./src/plugin/');
const F2 = require('./core');

// 测试
const { Legend, Guide } = require('./src/plugin/');
F2.Chart.plugins.register([ Legend, Guide ]);
const { Legend, Guide, Tooltip } = require('./src/plugin/');
F2.Chart.plugins.register([ Legend, Guide, Tooltip ]);

module.exports = F2;
26 changes: 21 additions & 5 deletions src/chart/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,11 +134,6 @@ class Chart extends Base {
* @type {String}
*/
id: null,
/**
* 每个 chart 实例的唯一 id
* @type {[type]}
*/
chartId: Util.uid(),
/**
* 画布中绘制图形的边距
* @type {Array|Number}
Expand Down Expand Up @@ -265,6 +260,27 @@ class Chart extends Base {
filters[field] = condition;
}

/**
* 配置 tooltip
* @param {boolean|object} enable 为布尔值表示是否开启tooltip，对象则表示配置项
* @param {object} cfg 配置项
* @return {Chart} 返回 Chart 实例
*/
tooltip(enable, cfg) {
const tooltipController = this.get('tooltipController');
if (!tooltipController) {
return this;
}
if (Util.isObject(enable)) { // chart.tooltip({})
cfg = enable;
enable = true;
}
tooltipController.enable = enable;
tooltipController.cfg = cfg;

return this;
}

_getFieldsForLegend() {
const fields = [];
const geoms = this.get('geoms');
Expand Down
138 changes: 0 additions & 138 deletions src/component/legend/category.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,151 +161,13 @@ class CategoryLegend extends Legend {
return itemGroup;
}

// _getNextX() {
// const { layout, itemGap, itemsGroup, itemWidth } = this;
// const children = itemsGroup.get('children');
// let nextX = 0;
// if (layout === 'horizontal') { // 水平布局
// for (let i = 0, len = children.length; i < len; i++) {
// const child = children[i];
// nextX += (itemWidth ? itemWidth : child.get('width')) + itemGap;
// }
// }
// return nextX;
// }

// _getNextY() {
// const { itemMarginBottom, layout, itemsGroup, titleShape } = this;
// const titleGap = titleShape ? this.titleGap : 0;
// const children = itemsGroup.get('children');

// let nextY = titleGap;
// if (titleShape) {
// nextY += titleShape.getBBox().height;
// }

// if (layout === 'vertical') { // 竖直布局
// for (let i = 0, len = children.length; i < len; i++) {
// const child = children[i];
// nextY += child.get('height') + itemMarginBottom;
// }
// }
// return nextY;
// }

_formatItemValue(value) {
const formatter = this.itemFormatter;
if (formatter) {
value = formatter.call(this, value);
}
return value;
}

// _getMaxItemWidth() {
// if (this.maxItemWidth) {
// return this.maxItemWidth;
// }
// const itemsGroup = this.itemsGroup;
// const children = itemsGroup.get('children');
// let maxItemWidth = 0;
// for (let i = 0, length = children.length; i < length; i++) {
// maxItemWidth = Math.max(maxItemWidth, children[i].get('width'));
// }
// this.maxItemWidth = maxItemWidth;
// return maxItemWidth;
// }

// _adjustHorizontal() {
// const maxLength = this.maxLength;
// if (Util.isNil(maxLength)) {
// return;
// }
// const itemsGroup = this.itemsGroup;
// const children = itemsGroup.get('children');
// const itemGap = this.itemGap;
// const itemMarginBottom = this.itemMarginBottom;
// const titleShape = this.titleShape;
// let titleGap = 0;
// if (titleShape) {
// titleGap = titleShape.getBBox().height + this.titleGap;
// }

// let row = 0;
// let rowLength = 0;
// let width;
// let height;
// const itemWidth = this.itemWidth || this._getMaxItemWidth();
// if (itemsGroup.getBBox().width > maxLength) {
// for (let i = 0, len = children.length; i < len; i++) {
// const child = children[i];
// width = itemWidth || child.get('width');
// height = child.get('height') + itemMarginBottom;

// if (maxLength - rowLength < width) {
// row++;
// rowLength = 0;
// }

// child.moveTo(rowLength, row * height + titleGap);
// rowLength += width + itemGap;
// }
// }
// return;
// }

// _adjustVertical() {
// const maxLength = this.maxLength; // 垂直布局，则 maxLength 代表容器的高度
// if (Util.isNil(maxLength)) {
// return;
// }
// const itemsGroup = this.itemsGroup;
// const titleShape = this.titleShape;
// const children = itemsGroup.get('children');
// const itemGap = this.itemGap;
// const itemMarginBottom = this.itemMarginBottom;
// const titleGap = this.titleGap;
// const titleHeight = titleShape ? titleShape.getBBox().height + titleGap : 0;
// const itemWidth = this.itemWidth;
// let colLength = titleHeight;
// let width;
// let height;
// let maxItemWidth = 0;
// let totalLength = 0;

// if (itemsGroup.getBBox().height > maxLength) {
// for (let i = 0, length = children.length; i < length; i++) {
// const child = children[i];
// width = child.get('width');
// height = child.get('height');

// if (itemWidth) {
// maxItemWidth = itemWidth + itemGap;
// } else if (width > maxItemWidth) {
// maxItemWidth = width + itemGap;
// }

// if (maxLength - colLength < height) {
// colLength = titleHeight;
// totalLength += maxItemWidth;
// child.moveTo(totalLength, titleHeight);
// } else {
// child.moveTo(totalLength, colLength);
// }

// colLength += height + itemMarginBottom;
// }
// }
// return;
// }

// _adjustItems() {
// const layout = this.layout;
// if (layout === 'horizontal') {
// this._adjustHorizontal();
// } else {
// this._adjustVertical();
// }
// }
}

Util.mix(CategoryLegend.prototype, Mixin);
Expand Down
2 changes: 1 addition & 1 deletion src/component/marker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ class Marker extends Shape {
return {
x: 0,
y: 0,
lineWidth: 1
lineWidth: 0
};
}

Expand Down
Loading

0 comments on commit 969f5c6

Please sign in to comment.