126 lines
5.0 KiB
Java
126 lines
5.0 KiB
Java
import { __assign, __extends } from "tslib";
|
||
import { debounce, each, isString } from '@antv/util';
|
||
import { GROUP_Z_INDEX } from '../constant';
|
||
import { getEngine } from '../engine';
|
||
import { createDom, getChartSize, removeDom, modifyCSS } from '../util/dom';
|
||
import View from './view';
|
||
/**
|
||
* Chart 类，是使用 G2 进行绘图的入口。
|
||
*/
|
||
var Chart = /** @class */ (function (_super) {
|
||
__extends(Chart, _super);
|
||
// @ts-ignore
|
||
function Chart(props) {
|
||
var _this = this;
|
||
var container = props.container, width = props.width, height = props.height, _a = props.autoFit, autoFit = _a === void 0 ? false : _a, padding = props.padding, _b = props.renderer, renderer = _b === void 0 ? 'canvas' : _b, pixelRatio = props.pixelRatio, _c = props.localRefresh, localRefresh = _c === void 0 ? true : _c, _d = props.visible, visible = _d === void 0 ? true : _d, _e = props.defaultInteractions, defaultInteractions = _e === void 0 ? ['tooltip', 'legend-filter', 'legend-active', 'continuous-filter'] : _e, options = props.options, limitInPlot = props.limitInPlot, theme = props.theme;
|
||
var ele = isString(container) ? document.getElementById(container) : container;
|
||
// 生成内部正式绘制的 div 元素
|
||
var wrapperElement = createDom('<div style="position:relative;"></div>');
|
||
ele.appendChild(wrapperElement);
|
||
// if autoFit, use the container size, to avoid the graph render twice.
|
||
var size = getChartSize(ele, autoFit, width, height);
|
||
var G = getEngine(renderer);
|
||
var canvas = new G.Canvas(__assign({ container: wrapperElement, pixelRatio: pixelRatio,
|
||
localRefresh: localRefresh }, size));
|
||
// 调用 view 的创建
|
||
_this = _super.call(this, {
|
||
parent: null,
|
||
canvas: canvas,
|
||
// create 3 group layers for views.
|
||
backgroundGroup: canvas.addGroup({ zIndex: GROUP_Z_INDEX.BG }),
|
||
middleGroup: canvas.addGroup({ zIndex: GROUP_Z_INDEX.MID }),
|
||
foregroundGroup: canvas.addGroup({ zIndex: GROUP_Z_INDEX.FORE }),
|
||
padding: padding,
|
||
visible: visible,
|
||
options: options,
|
||
limitInPlot: limitInPlot,
|
||
theme: theme,
|
||
}) || this;
|
||
/**
|
||
* when container size changed, change chart size props, and re-render.
|
||
*/
|
||
_this.onResize = debounce(function () {
|
||
_this.forceFit();
|
||
}, 300);
|
||
_this.ele = ele;
|
||
_this.canvas = canvas;
|
||
_this.width = size.width;
|
||
_this.height = size.height;
|
||
_this.autoFit = autoFit;
|
||
_this.localRefresh = localRefresh;
|
||
_this.renderer = renderer;
|
||
_this.wrapperElement = wrapperElement;
|
||
// 自适应大小
|
||
_this.updateCanvasStyle();
|
||
_this.bindAutoFit();
|
||
_this.initDefaultInteractions(defaultInteractions);
|
||
return _this;
|
||
}
|
||
Chart.prototype.initDefaultInteractions = function (interactions) {
|
||
var _this = this;
|
||
each(interactions, function (interaction) {
|
||
_this.interaction(interaction);
|
||
});
|
||
};
|
||
/**
|
||
* 改变图表大小，同时重新渲染。
|
||
* @param width 图表宽度
|
||
* @param height 图表高度
|
||
* @returns
|
||
*/
|
||
Chart.prototype.changeSize = function (width, height) {
|
||
this.width = width;
|
||
this.height = height;
|
||
this.canvas.changeSize(width, height);
|
||
// 重新渲染
|
||
this.render(true);
|
||
return this;
|
||
};
|
||
/**
|
||
* 销毁图表，同时解绑事件，销毁创建的 G.Canvas 实例。
|
||
* @returns void
|
||
*/
|
||
Chart.prototype.destroy = function () {
|
||
_super.prototype.destroy.call(this);
|
||
this.unbindAutoFit();
|
||
this.canvas.destroy();
|
||
removeDom(this.wrapperElement);
|
||
this.wrapperElement = null;
|
||
};
|
||
/**
|
||
* 显示或隐藏图表
|
||
* @param visible 是否可见，true 表示显示，false 表示隐藏
|
||
* @returns
|
||
*/
|
||
Chart.prototype.changeVisible = function (visible) {
|
||
this.wrapperElement.style.display = visible ? '' : 'none';
|
||
return this;
|
||
};
|
||
/**
|
||
* 自动根据容器大小 resize 画布
|
||
*/
|
||
Chart.prototype.forceFit = function () {
|
||
// 注意第二参数用 true，意思是即时 autoFit = false，forceFit() 调用之后一样是适配容器
|
||
var _a = getChartSize(this.ele, true, this.width, this.height), width = _a.width, height = _a.height;
|
||
this.changeSize(width, height);
|
||
};
|
||
Chart.prototype.updateCanvasStyle = function () {
|
||
modifyCSS(this.canvas.get('el'), {
|
||
display: 'inline-block',
|
||
verticalAlign: 'middle',
|
||
});
|
||
};
|
||
Chart.prototype.bindAutoFit = function () {
|
||
if (this.autoFit) {
|
||
window.addEventListener('resize', this.onResize);
|
||
}
|
||
};
|
||
Chart.prototype.unbindAutoFit = function () {
|
||
if (this.autoFit) {
|
||
window.removeEventListener('resize', this.onResize);
|
||
}
|
||
};
|
||
return Chart;
|
||
}(View));
|
||
export default Chart;
|
||
//# sourceMappingURL=chart.js.map |