Top 10 Examples of "g2 in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'g2' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
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'
}