G2 基本使用折线图柱状图饼图基本配置

最新推荐文章于 2024-08-23 09:22:24 发布

weixin_33946020

最新推荐文章于 2024-08-23 09:22:24 发布

阅读量1w

点赞数

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/nmxs/p/10760610.html

版权

这篇博客介绍了G2基本使用方法，包括通过浏览器引入和npm安装，以及创建图表容器。重点讲述了如何编写图表绘制代码，包括创建Chart对象、设置数据源和绘制图形语法。提供了折线图的示例代码，适用于网页开发中数据可视化的场景。

摘要由CSDN通过智能技术生成

G2的基本使用

1.浏览器引入  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

2.通过 npm 安装 npm install @antv/g2 --save

　　3.创建 div 图表容器 <div id="c1"></div>

　　4. 编写图表绘制代码

　　　　(1)创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；

　　　　(2)载入图表数据源；

　　　　(3)使用图形语法进行图表的绘制；

　　　　(4)渲染图表。(这部分代码用 <script></script>，可以放在页面代码的任意位置（最好的做法是放在 </body> 之前）)

　　5示例：

　　　　（1）折线图(单线)

　　　　　　<body>

    　　　　　　　var 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}];
    　　　　　　　　var chart = new G2.Chart({
   
        　　　　　　　　container: 'appearance', // 指定 图表容器ID
        　　　　　　　　forceFit: true,    // 是否自动缩放