antvis / component Goto Github PK
View Code? Open in Web Editor NEW🍱 AntV UI component based on G render engine.
Home Page: https://github.com/antvis/component
License: MIT License
🍱 AntV UI component based on G render engine.
Home Page: https://github.com/antvis/component
License: MIT License
请问,DualAxes图表在初始化的时候,怎么样自定义选中某个图例
@antv/g2/lib/interface.d.ts 中的value?: number[]; 与接口文档中的values描述不符,麻烦看下以谁的为主
关于坐标轴,line 类型 的 titleOffset的几点问题。
由于在 https://github.com/antvis/component/blob/master/src/axis/base.js 92行代码中,给title 中的 offset 设置了默认值。与 https://github.com/antvis/component/blob/master/src/axis/line.js
中的 renderTitle 函数,107行代码逻辑矛盾,只有手动设置offset 为null 才进入此逻辑。
https://github.com/antvis/component/blob/master/src/axis/line.js 中 109 行 labelsGroup
为 null,正确属性对象应该为:labelRenderer
const labelRenderer = self.get('labelRenderer');
if (labelRenderer) {
const labelLength = self.getMaxLabelWidth(labelRenderer);
const labelOffset = self.get('label').offset || self.get('_labelOffset');
titleOffset += labelLength + labelOffset;
}
offset 是否可以考虑是相对于坐标轴label文本的偏移量,如果在label有旋转角度的情况下,根据坐标轴项量 / 旋转角度 / label文本最大宽度 / fontSize等条件 可以计算 label文本的实际宽度。
真心希望尽快修复 1,2问题。等待上线中。。
请问,在初始化图表的时候,怎么样自定义选中某个图例
如题
主要是 label 和 grid,参考 F2 https://f2.antv.vision/en/docs/api/chart/axis#chartaxisfield-config ,对于一些场景的特殊文本标注,移动端横轴最后一个文本右对齐以及 0 轴线高亮等还是有用的。
this.antvChart.on('element:click', ev => {
const lineElement = ev.target.get('element')
const data = lineElement.getModel().data // 数组
})
这个方法可以获取到单个的点吗
@dxq613 @leungwensen
可否让 guide 的 html 直接传递一个el对象 而不是字符串
https://github.com/antvis/component/blob/master/src/guide/html.js#L55
由于图表padding设置为auto时,滚动条、轴标题和轴文本等并不能自适应,所以想要手动计算padding值达到自适应效果。
由于后台返回值不同,所以padding值不能写固定值。
有没有办法获取到x轴label占的最大高度和y轴label的最大宽度?
在上层 G2 中,提供了四种动画类型:
组件中默认参与动画的元素:
所以需要组件层支持:以上四种动画的配置:
interface AnimateBaseCfg {
/** 动画缓动函数 */
readonly easing?: string;
/** 动画执行函数 */
readonly animation?: string;
/** 动画执行时间 */
readonly duration?: number;
/** 动画延迟时间 */
readonly delay?: number;
/** 动画执行结束后的回调函数 */
readonly callback?: () => any;
}
interface AnimateOption {
appear?: AnimateBaseCfg | false | null;
enter?: AnimateBaseCfg | false | null;
update?: AnimateBaseCfg | false | null;
leave?: AnimateBaseCfg | false | null;
}
chart.axis('fieldName', {
animate: AnimateOption
});
catPageHtml.js下的
_renderFlipPage函数获取legendWrapper 时有问题,
页面有多个图表时,document.getElementsByClassName(CONTAINER_CLASS)[0]会获取错误
是不是应该改为 const legendWrapper = this.get('legendWrapper')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>散点图</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.2/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
$.getJSON('/assets/data/scatter.json', function(data) {
var chart = new G2.Chart({
container: 'mountNode',
forceFit: true,
height: window.innerHeight
});
// 数据格式: [{"gender":"female","height":161.2,"weight":51.6}]
chart.source(data);
chart.tooltip({
showTitle: false,
crosshairs: {
type: 'cross'
},
htmlContent: (title, items) => {
// debugger;
let container =
'<div class="g2-tooltip" style="visibility: visible;position: absolute;border: 1px solid #efefef;'
+ 'color:#000;padding: 5px 15px;opacity: 0.8; background: white; "transition":top 200ms, left 200ms; ">'
// + '<div class="g2-tooltip-title" style="margin-bottom: 4px;"></div>'
// + `${title}`
+ '<ul class="g2-tooltip-list"></ul>';
items.forEach((item, index) => {
const color = item.color;
container += '<li style="list-style:none;">'
+ '<p>' + item.name + '</p>'
+ '</li>';
});
container += '</div>';
return container;
},
});
chart.point().position('height*weight').size(4).shape('circle').opacity(0.65).tooltip('gender*height*weight', function(gender, height, weight) {
return {
name: gender,
value: height + '(cm), ' + weight + '(kg)'
};
});
chart.render();
});
</script>
</body>
</html>
需求:修改成0在下面,最大值在上面
tooltip.update({
x,
y,
});
对 tooltip 内容框的位置进行更新的同时需要更新 crosshairs 的位置。
关闭其他 autoHide,autoRotate。
As title.
https://github.com/antvis/component/blob/master/package.json#L64
lengend设置items后图表和图例不自适应,给图例设置最大宽度后怎么让它超出隐藏超出部分。
目前自定义配置legend逻辑复杂度过高
怎么设置图例分页的颜色。
请给这个 repo 一个稍微详细一点的 Description。【开头补一个一句话说明】
稍微细化一下 README,说一下这个 repo 是干什么的、大概被哪里依赖。
(如果是已经废弃的项目需要清理)
Relate to antvis/G2#867
arc和line都已经新增了style:{} , 但是regionFilter还是去年的版本。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.