开始使用
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
xcv
在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson，为 G2 的图形语法提供了理论基础！
安装
npm install @antv/g2特性
- ✔︎ 简单、易用
- ✔︎ 完备的可视化编码
- ✔︎ 强大的扩展能力
文档
快速开始
<div id="c1"></div>class FlavorForm extends React.Component { constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value}); }
handleSubmit(event) { alert('Your favorite flavor is: ' + this.state.value); event.preventDefault(); }
render() {
return (
<form onSubmit={this.handleSubmit}> <label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select> </label>
<input type="submit" value="Submit" />
</form> );
}
}
本地开发
$ npm install
# 跑测试用例
$ npm run test-live
# 监听文件变化构建，并打开 demo 页面
$ npm run dev
# 打开 demo
$ npm run demos体验改进计划说明
为了更好服务用户，G2 会将 URL 和版本信息发送回 AntV 服务器：
https://kcart.alipay.com/web/bi.do
除了 URL 与 G2 版本信息外，不会收集任何其他信息，一切为了能对 G2 的运行情况有更多了解，以更好服务于用户。如有担心，可以通过下面的代码关闭：
// 关闭 G2 的体验改进计划打点请求
G2.track(false);更新
我们已决定终止体验改进计划
从 @antv/[email protected] 版本开始，所有打点代码已被移除。后续版本的 G2 不会再发送任何远程请求
如何贡献
如果您在使用的过程中碰到问题，可以先通过 issues 看看有没有类似的 bug 或者建议。
如需提交代码，请遵从我们的贡献指南。
I can highlight .some-class { background-color: red } with CSS syntax.