How to use g2 - 10 common examples
To help you get started, we’ve selected a few g2 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ant-design / ant-design-pro-site / scaffold / src / components / Charts / Radar / index.js View on Github 
renderChart(data) {
const { height = 0,
hasLegend = true,
fit = true,
tickCount = 4,
margin = [16, 0, 16, 0] } = this.props;
if (!data || (data && data.length < 1)) {
return;
}
// clean
this.node.innerHTML = '';
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
height: height - 22,
plotCfg: {
margin,
},
});
this.chart = chart;
chart.source(data, {
value: {
min: 0,
tickCount,
},
});const {
height = 0,
fit = true,
margin = [32, 60, 32, 60],
borderColor,
color,
} = this.props;
if (!data || (data && data.length < 1)) {
return;
}
// clean
this.node.innerHTML = '';
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
height: height - 22,
plotCfg: {
margin,
},
legend: false,
});
chart.legend(false);
chart.axis('x', {
title: false,
});
chart.axis('y', {
title: false,
});
chart.tooltip({fit = true,
color = 'rgba(24, 144, 255, 0.85)',
margin = [32, 0, (autoHideXLables ? 8 : 32), 40],
} = this.props;
if (!data || (data && data.length < 1)) {
return;
}
// clean
this.node.innerHTML = '';
const { Frame } = G2;
const frame = new Frame(data);
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
height: height - 22,
legend: null,
plotCfg: { margin },
});
if (autoHideXLables) {
chart.axis('x', {
title: false,
tickLine: false,
labels: false,
});
} else {
chart.axis('x', { title: false });
}m = [24, 240, 24, 0];
} else if (percent) {
m = [0, 0, 0, 0];
} else {
m = [24, 0, 24, 0];
}
}
const h = title ? (height + m[0] + m[2] + (-46)) : (height + m[0] + m[2]);
// clean
this.node.innerHTML = '';
const Stat = G2.Stat;
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
height: h,
plotCfg: {
margin: m,
},
animate,
});
if (!tooltip) {
chart.tooltip(false);
} else {
chart.tooltip({
title: null,
});
}const Chart = createG2(chart => {
const Stat = G2.Stat;
chart.coord('theta', {
radius: 0.4, // 设置饼图的大小
});
chart.legend('name', {
position: 'bottom',
itemWrap: true,
word: {
fill: 'rgba(255,255,255,.5)',
},
formatter: name => `${name}: ${desc[name].percent} - ${desc[name].ps}`,
});
chart
.intervalStack()
.position(Stat.summary.percent('data'))
.color('name', color)
.label('name');if (!margin) {
if (hasLegend) {
m = [24, 240, 24, 0];
} else if (percent) {
m = [0, 0, 0, 0];
} else {
m = [24, 0, 24, 0];
}
}
const h = title ? (height + m[0] + m[2] + (-46)) : (height + m[0] + m[2]);
// clean
this.node.innerHTML = '';
const Stat = G2.Stat;
const chart = new G2.Chart({
container: this.node,
forceFit: fit,
height: h,
plotCfg: {
margin: m,
},
animate,
});
if (!tooltip) {
chart.tooltip(false);
} else {
chart.tooltip({
title: null,}
},
html: {
align: 'cc'
}
},
tooltipMarker: {
fill: '#fff',
symbol: 'circle',
lineWidth: 2,
stroke: DEFAULT_COLOR,
radius: 4
} // 提示信息在折线图、区域图上形成点的样式
};
// let theme = G2.Util.mix(true, {}, G2.Theme, Theme);
G2.Global.setTheme(Theme); // 将主题设置为用户自定义的主题
export default G2import React, { PureComponent } from 'react';
import G2 from 'g2';
const Shape = G2.Shape;
/* eslint no-underscore-dangle: 0 */
class Gauge extends PureComponent {
componentDidMount() {
this.renderChart();
}
componentWillReceiveProps(nextProps) {
this.renderChart(nextProps);
}
handleRef = (n) => {
this.node = n;
}
initChart(nextProps) {renderChart(nextProps) {
const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent } = nextProps || this.props;
const data = [{ name: title, value: percent }];
if (this.chart) {
this.chart.clear();
}
if (this.node) {
this.node.innerHTML = '';
}
this.initChart(nextProps);
const chart = new G2.Chart({
container: this.node,
forceFit: true,
height,
animate: false,
plotCfg: {
margin: [10, 0, 30, 0],
},
});
chart.source(data);
chart.tooltip(false);
chart.coord('gauge', {
startAngle: -1.2 * Math.PI,
endAngle: 0.20 * Math.PI,renderLine () {
const chart = new G2.Chart({
container: 'line',
forceFit: true,
height: 400,
animate: true
});
chart.source(this.lineData);
chart.scale({
time: {
tickCount: 5,
range: [0, 1]
}
});
chart.tooltip({
crosshairs: {
type: 'line'
}g2
An implementation of the Grammar of Graphics in javascript
