antv-g2语法总结

最新推荐文章于 2024-07-25 10:39:29 发布

jiqiren1994

最新推荐文章于 2024-07-25 10:39:29 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/jiqiren1994/article/details/108424622

版权

本文总结了antv-g2创建图表的过程，包括第一步的语法基础，如数据填充、图形设置和坐标轴初始化。其次，详细介绍了设置坐标轴外观和度量的方法，如axis的配置和各种度量类型，如linear、cat、time等。最后，提到了view的概念，作为图表的组成部分，可以独立配置数据源、坐标系等，并且能继承chart的属性。

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

目的

使用antv-g2完成一个图表，该图表有两种结构组成，散点图与矩形图组成。我们需要将散点图与矩形图分别在两个view中绘制，所以还需要总结一下view的概念。

第一步语法基础

首先是引入相应依赖，其次是创建html容器<div id="c1"></div>，最后是数据以及相应初始化代码

const data = [
  { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  { feature: 'Design', value: 0.17, phone: 'iPhone' },
  { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  { feature: 'Large', value: 0.02, phone: 'iPhone' },
  { feature: 'Price', value: 0.21, phone: 'iPhone' },
  { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  { feature