蚂蚁金服的AntvG2的日常使用和报错情况(简称坑)-程序员宅基地

技术标签: 前端框架  插件(工具)  

先说报错:

1、antv 报错Chart.data is not a function
解决:这个是因为版本的问题,在不指定版本的情况下,由于npm安装的antv的版本为3.x.x, 我们可以使用v3中的source代替data方法

同时我们也可以使用v4版本:npm install @antv/[email protected]
2、

vue中使用

import {
     Chart } from '@antv/g2';
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: 'Brand', value: 0.16, phone: 'Samsung' },
  {
     feature: 'Contract', value: 0.35, phone: 'Samsung' },
  {
     feature: 'Design', value: 0.13, phone: 'Samsung' },
  {
     feature: 'Internet', value: 0.2, phone: 'Samsung' },
  {
     feature: 'Large', value: 0.13, phone: 'Samsung' },
  {
     feature: 'Price', value: 0.35, phone: 'Samsung' },
  {
     feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  {
     feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  {
     feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  {
     feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  {
     feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  {
     feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  {
     feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  {
     feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  {
     feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
];

export default {
    
  name: 'ceshi123',
  data(){
    return {
    data,}},
  mounted(){
    this.portrayNO1()},
  methods: {
    
  	portrayNO1(){
    
      const chart = new Chart({
    
         container: 'c1',
          width: 600,
          height: 300,})
      chart.source(data);
      chart.interval().position('genre*sold');
      chart.render();
    },

  },

}

data数据:(从该数据集可以看出,G2 接收的数据格式为标准的 JSON 数组。)
feature :x轴,
value:y轴比例,
phone:该数据集描述的是 iPhone,Samsung 以及 Nokia Smartphone 三款手机各个特征(feature)的评分情况(value)。

api:
new Chart:建 Chart 图表对象,指定图表所在的容器 ID、图表的宽高、边距等信息;
container: ‘mountNode’,(绑定对象div
autoFit: false,()
width: 600,(
height: 300,(
padding: [0, 100, 0, 40],(填充
renderer: ‘svg’, // 使用 svg 进行渲染,canvas 的性能受画布尺寸影响更大,而 SVG 的性能受图形元素个数影响更大。而且在小数据量的情况下,SVG 的方案通常内存占用会更小,做缩放、平移等操作的时候往往帧率也更高,所以如果单就图表库的视角来看,选择 Canvas 和 SVG 各有千秋。小画布、大数据量的场景适合用 Canvas,譬如热力图、大数据量的散点图等。如果画布非常大,有缩放、平移等高频的交互,或者移动端对内存占用量非常敏感等场景,可以使用 SVG 的方案。

chart.data(data) | | chart.source(data): 载入数据源;

chart.interval().position(‘genre*sold’):创建图形语法,绘制柱状图;
这个可以用jq的点语法: .postion .color .point
position(‘genre*sold’) x轴和y轴用数据中哪个
.shape(‘phone’, [‘circle’, ‘square’, ‘triangle’]) (形状分开
color(‘phone’):加颜色(用哪个数据来区分,下方会出现图标
.size(6); (形状的大小
.adjust(‘stack’) :(层叠样式出现,一层一种手机,左侧出问题
point():点状
interval():柱状图
line():折线图
area():面积图
.coordinate()雷达图,3XXXX版本没有这个方法
.axis(‘score’) (Axis 坐标轴可以通过
.style()
.tooltip()(Tooltip 提示信息可以通过
Legend()(Legend 图例可以通过
.clear() (
// 清理所有图形

.scale()
facet(‘rect’)

注意:G2 中并没有特定的图表类型(柱状图、散点图、折线图等)的概念,用户可以单独绘制某一种类型的图表,如饼图,也可以绘制混合图表,比如折线图和柱状图的组合。G2 生成的图表的类型,都是由几何标记决定的,
叠加使用

chart
  .area()
  .position('feature*value')
  .color('phone');
chart
  .line()
  .position('feature*value')
  .color('phone');

chart.render():渲染图表

如何更新数据:

chart.changeData(data);
chart.data(newData); // 更新数据源
chart.render(); // 更新图表!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45351419/article/details/107633858

智能推荐

IOS 学习笔记 提示框 操作表 UIAlertController ActionSheet_uialertcontrollerstyleactionsheet-程序员宅基地

文章浏览阅读3.6k次。在IOS开发中,提示框、操作表 都是通过UIAlertController +UIAlertAction来实现的,同时通过gif图生动展示效果 _uialertcontrollerstyleactionsheet

servlet-第一次使用HelloServlet(mac)_mac如何使用servlet-程序员宅基地

文章浏览阅读379次。servlet既基础又重要,不用就忘,用了总会发现各种bug,所以需要不断记录和积累bug案例。_mac如何使用servlet

vc mysql 连接_vc连接mysql数据库的方法-程序员宅基地

文章浏览阅读178次。前段时间项目中用的是mysql数据库,它的连接方法有二种,一种是数据库自带的API,还有一种就用ADO连接了。由于本次项目用的mysql数据库只是暂时的,后期可能会更改为MSSQL,所以如果用mysql自带的API连接移植性不好,所以改为ADO的,到时只要修改下字符串连接值就行了。其实ADO连接的底层也是调用的ODBC驱动去连接,所以需要去下载个数据库对应的ODBC驱动,别人说秘本需要对应,要不然..._cadodatabase 连接mysql

linux安装kodexplorer云网盘_linux 安装免费网盘-程序员宅基地

文章浏览阅读1.1k次。1.上传kodexplorer4.25.zip和xampp-linux-x64-5.6.33-0-installer.run2.先安装xampp授权:chmod 777 xampp-linux-x64-5.6.33-0-installer.run执行:./xampp-linux-x64-5.6.33-0-installer.run3.启动xampp,执行/opt/lampp/lampp..._linux 安装免费网盘

Objective-C EXC_BAD_ACCESS_objectivec bad access代码-程序员宅基地

文章浏览阅读583次。本文转自 http://ibuick.com/buick2011820/index.php/archives/objective-c-exc_bad_access写程序遇到 Bug 并不可怕,大部分的问题,通过简单的 Log 或者 代码分析并不难找到原因所在。但是在 Objective-C 编程中遇到 EXC_BAD_ACCESS 问题的时候,通过简单常规的手段很难发现问题。这篇文章,给大家介绍一个常用的查找 EXC_BAD_ACCESS 问题根源的方法。首先说一下 EXC_BAD_ACCESS 这个错误,_objectivec bad access代码

Java Web项目CPU超过100%问题分析总结-程序员宅基地

文章浏览阅读274次。涉及到通讯底层的IO读写,也就是 SOCKET 这一块的内容。由于应用本身的特点,每天早上上班高峰时间,有大量的请求连接和数据通讯,系统的压力非常大。期间有CPU 使用率超过100%的情况。我这里分享一下,我们团队解决这类问题的分析手段。系统影响慢或可能无法访问,服务器上发现swap占用很高,负载和cpu通过zabbix监控看比代码升级前都要高.因服务器核数少,仔细观察有一个cpu利用率一直是10..._web占用100%cpu吗?

随便推点

”System.InvalidOperationException”类型的未经处理的异常出现在 mscorlib.dll 中_“system.invalidoperationexception”类型的未经处理的异常在 msco-程序员宅基地

文章浏览阅读5.4k次。如果调试的时候 调试窗口出现System.InvalidOperationException”类型的未经处理的异常出现在 mscorlib.dll 中那是因为你在历遍集合的时候 改变了集合。。。。_“system.invalidoperationexception”类型的未经处理的异常在 mscorlib.dll 中发

2020年天梯赛-模拟赛 L1-6 检查密码_本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用-程序员宅基地

文章浏览阅读858次。题目描述:本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用户设置的密码必须由不少于6个字符组成,并且只能有英文字母、数字和小数点 .,还必须既有字母也有数字。输入格式:输入第一行给出一个正整数 N(≤ 100),随后 N 行,每行给出一个用户设置的密码,为不超过 80 个字符的非空字符串,以回车结束。输出格式:对每个用户的密码,在一行中输出系统反馈信息,分以下5种:如果密码合法,输出 Your password is wan mei.;如果密码太短,不论合法与否,都_本题要求你帮助某网站的用户注册模块写一个密码合法性检查的小功能。该网站要求用

海量数据肖枫:共建共治openGauss根社区,共享欣欣向荣新生态_肖枫的博客-程序员宅基地

文章浏览阅读366次。在近日举行的面向数据库开发者的年度活动openGauss Developer Day 2022上,神舟通用、云和恩墨、超图软件、南大通用、海量数据、超聚变、中国联通七家重量级伙伴及行业客户同时发布基于openGauss 3.0的商业发行版,其中超图软件、云和恩墨和海量数据还基于社区联合创新孵化出业界首个基于openGauss的空间数据库Yukon(禹贡),创下了国产开源数据库领域的里程碑时刻。会后,极客网对话深度参与其中的中国唯一以数据库为主营业务主板上市的海量数据公司的总裁肖枫,听他讲述了openGaus_肖枫的博客

AJAX与callback的区别(续asp.net2.0客户端回调的使用)-程序员宅基地

文章浏览阅读71次。先引用《AJAX .Net Wrapper usage guide》里面的一段话:Asynchronous JavaScript and XML (AJAX) has recently become the craze thanks,... In ASP.Net terms, AJAX allows server-side processing to occur without requiring..._asp.net raisecallbackevent 和ajax区别

python安装xgboost的前提问题_xgb1.7.5-程序员宅基地

文章浏览阅读233次。xgboost依赖于numpy和scipy,但是我numpy和scipy下载方式不一样,numpy从源网下载,scipy从豆瓣镜像源下载,出现了不匹配的问题卸载numpy和scipy然后统一从豆瓣镜像源下载后问题解决。在此顺便安利豆瓣镜像源,pip安装Python第三方库速度超级快,原文地址点击打开链接我用的Python2.7,windows10,cmd里输入网址时要用http_xgb1.7.5

【原创 gif】-程序员宅基地

文章浏览阅读67次。视频转gif高质量gif在线制作编辑gifscreengif 软件 点击编辑可以剪裁 和删除 增加帧screengif吊的不行