How to use the g2.Chart function in g2
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,
});
}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'
}initChart(props) {
const { width, height, data, plotCfg, forceFit, configs } = props;
const chart = new G2.Chart({
id: this.chartId,
width, height,
plotCfg,
forceFit,
});
chart.source(data);
__operation(chart, configs);
this.chart = chart;
}g2
An implementation of the Grammar of Graphics in javascript
