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

最新推荐文章于 2024-05-17 20:07:07 发布

weixin_33946020

最新推荐文章于 2024-05-17 20:07:07 发布

阅读量1w

点赞数

文章标签： javascript 人工智能 ViewUI

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

版权

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,    // 是否自动缩放

最低0.47元/天解锁文章

weixin_33946020

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
G2 基本使用折线图柱状图饼图基本配置

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.创...
复制链接

扫一扫