Unlock Powerful Data Visualizations with G2: A JavaScript Library Tutorial
This article introduces G2, an open‑source JavaScript visualization library from Ant Financial, explains its semantic charting capabilities and flexible graphic grammar, and provides a complete HTML example that creates a bar chart from sample data, guiding developers to quickly build custom visualizations.
G2 is an open‑source data‑visualization project from Ant Financial’s Data Graphics team, built with JavaScript and designed to provide powerful semantic charting capabilities for big‑data scenarios.
It is not limited to a few predefined chart types; G2 is a full‑featured drawing tool that lets users freely create custom visualizations by mapping data fields to visual attributes such as position, shape, size, and color.
The library is driven by a professional graphic grammar that describes how data fields map onto graphical properties and how they are rendered on coordinate systems.
Example usage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bar Chart</title>
<!-- Import G2 script -->
<script src="https://as.alipayobjects.com/g/datavis/g2/1.2.3/index.js"></script>
</head>
<body>
<!-- Chart container -->
<div id="c1"></div>
<script>
// Data source
var data = [
{action: 'Visit', visitor: 500},
{action: 'Browse', visitor: 400},
{action: 'Interact', visitor: 300}
];
// Create chart
var chart = new G2.Chart({
id: 'c1',
width : 800,
height : 400
});
// Load data
chart.source(data);
// Draw bar chart
chart.interval().position('action*visitor').color('action');
// Render
chart.render();
</script>
</body>
</html>For more information, see the G2 official website: http://g2.alipay.com/.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.