antv API

最新推荐文章于 2024-11-08 12:20:45 发布

转载最新推荐文章于 2024-11-08 12:20:45 发布 · 1.7k 阅读

文章标签：

#阿里图表

图表类型专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过浏览器引入或NPM安装G2图表库，并展示了如何创建图表实例，配置图表属性，以及使用Slider插件的方法。G2是一款强大的数据可视化工具，支持多种图表类型，适用于Web应用的数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.安装：

1 浏览器引入

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

2 通过NPM 安装

//提供了 G2 npm 包，通过下面的命令即可完成安装
npm install @antv/g2 --save

//成功安装完成之后，即可使用 import 或 require 进行引用。
import G2 from '@antv/g2';
const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
});

二.图表组成

在这里插入图片描述

图表容器

<div id="c1"></div>

传入 dom 容器的 html 节点对象
new G2.Chart({
container: {string} | {HTMLDivElement}, width?: {number}, height?: {number}, padding?: {object} | {number} | {array}, background?: {object}, plotBackground?: {object}, forceFit?: {boolean}, animate?: {boolean}, pixelRatio?: {number}, data?: {array} | {DataSet.View}, theme?: {string} | {object}, renderer?: {string},});

const data = [
        { genre: 'Sports', sold: 275 },
        { genre: 'Strategy', sold: 115 },
        { genre: 'Action', sold: 120 },
        { genre: 'Shooter', sold: 350 },
        { genre: 'Other', sold: 150 }
    ]
const chart = new G2.Chart({
	container:'c1', //对应图表的 DOM 容器
	width:800, //forceFit为 true,次设置失效
	height:600,
	forceFit:false, //图表的宽度自适应开关，默认为 false，设置为 true 时表示自动取 dom（实例容器）的宽度
	animate：false， //图表动画开关，默认为 true，即开启动画
	pixelRatio:, //设置设备像素比，默认取浏览器的值 window.devicePixelRatio。如果您使用的是高像素密度设备，则应该获得更高分辨率的图像。一个好的经验法则是将您显示的图像的大小乘以像素比率。
	data:data ,
	theme:'default',
	renderer:'canvas' //可以是字符串 canvas 或者 svg
})

2.Slider 滑块插件

new Slider({
  container: {string} | {HTMLElement},
  width?: {number} | {string},
  height?: {number},
  padding?: {object} | {number} | {array},
  xAxis: {string},
  yAxis: {string},
  start: {string} | {number},
  end: {string} | {number},
  data: {array} | {dataview},
  fillerStyle?: {object},
  backgroundStyle?: {object},
  textStyle?: {object},
  handleStyle?: {object},
  backgroundChart?: {object}
});