Antv/G2-Histogramm

Antv/G2-Tutorial

G2Dabei handelt es sich um eine Reihe von Visualisierungs-Engines, die auf der Theorie der Graphgrammatik basieren und auf Daten basieren. Sie bieten Graphgrammatik und interaktive Grammatik mit hoher Benutzerfreundlichkeit und Skalierbarkeit. Wenn Sie es verwenden G2, müssen Sie nicht auf verschiedene mühsame Implementierungsdetails des Diagramms achten und können mit Canvasoder SVGeine Vielzahl interaktiver statistischer Diagramme mit einer Anweisung erstellen.

Merkmale :

Perfekte Grafikgrammatik: Zuordnung von Daten zu Grafiken, Möglichkeit zum Zeichnen aller Diagramme.
Brandneue Interaktionsgrammatik: Durch den Trigger- und Feedback-Mechanismus können verschiedene interaktive Verhaltensweisen kombiniert werden, um Daten zu erkunden.
Leistungsstarkes Ansichtsmodul: Es kann die Entwicklung personalisierter mehrdimensionaler Analysegrafiken für Daten unterstützen.
Dual-Engine-Rendering: Canvasoder SVGnach Belieben wechseln.
Visuelles Komponentensystem: interaktionsorientiertes, elegantes Erlebnis.
Vollständige Umarmung TypeScript: Stellt vollständige Typdefinitionsdateien bereit.

Es muss in aktuellen Projekten verwendet werden . Machen wir also Antv/G2zunächst eine kleine Implementierung:demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>G2 柱状图 demo</title>
</head>
<!-- 引入G2在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>
<body>
	<div id="chart"></div>
	<script>		
        // G2 对数据源格式的要求：JSON 数组，数组的每个元素是一个标准 JSON 对象。
		const data = [
		{
      
       year: '1991', value: 3 },
		{
      
       year: '1992', value: 4 },
		{
      
       year: '1993', value: 3.5 },
		{
      
       year: '1994', value: 5 },
		{
      
       year: '1995', value: 4.9 },
		{
      
       year: '1996', value: 6 },
		{
      
       year: '1997', value: 7 },
		{
      
       year: '1998', value: 9 },
		{
      
       year: '1999', value: 13 },
        ]; 
        
        // Step 1: 创建 Chart 对象（使用 script 标签引入 G2 资源时，挂载在 window 上的变量名为 G2，所以需要加上 G2 的前缀。）
        const chart = new G2.Chart({
      
      
            container: 'chart', // 指定图表容器 ID：chart
            width: 800, // 指定图表宽度
            height: 500 // 指定图表高度
        });
        
        // Step 2: 载入数据源
        chart.source(data);
        
        // Step 3：创建图形语法，绘制柱状图，由 year 和 value 两个属性决定图形位置，year 映射至 x ，value 映射至 y 轴
        chart.interval().position('year*value').color('year')
        
        // Step 4: 渲染图表
        chart.render();
    </script>
</body>
</html>

Seiteneffekt:
Fügen Sie hier eine Bildbeschreibung ein

Guess you like