天气插件和antv图表组件库的使用

news2024/11/25 4:56:44

目录

天气插件

 antv组件库

特性

数据映射

data 

xField

yField

图形样式

point

state

图表组件

label

tooltip

图表交互

添加交互


天气插件

 

网站:天气预报代码_天气预报插件_免费天气预报代码(插件)调用——天气网 (tianqi.com)

挑选想要的样式,点击

 首次使用会跳出这个界面

此处有个二维码,截图会违规显示不出来 

我们在使用域名和网站领域中输入百度网址即可

https://www.baidu.com

邮箱使用自己的,扫码关注微信公众号,回复天气插件获取密码,将密码输入调用密码中,提交。

这样我们就可以使用相应的天气组件代码了。

 效果图:

 antv组件库

网址:简介 | G2Plot (antgroup.com)

G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,"G2Plot"中的 G2 即意指图形语法 (the Gramma of Graphics),同时也致敬了 ggplot2。

特性

  • 📦 开箱即用、默认好用的高质量统计图表

  • 🎨 提炼自企业级产品的视觉语言和设计规范

  • 📊 响应式图表:致力于解决图表在任何数据和显示尺寸下的基本可读性问题

  • 🔳 图层化设计方法:在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合叠联动,共同讲述一个数据故事的可能性

我们既可以直接引用在线资源,也可以将其下载到本地使用

<!-- 引入在线资源 -->
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>
<!-- 下载到本地 引入本地脚本 -->
<script src="./g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
</script>

这里举例引入在线资源

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入antv g2plot 图表组件库 -->
  <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
</head>
<body>
  <script>
    console.log(G2Plot,'图表组件库');
  </script>
</body>
</html>

我们通过打印G2Plot可以查看图表组件库的信息:

其中有很多方法,我们要去创建某个图表,必须使用这些构造函数去创建。

<body>
  <!-- 2. 提供图表容器 -->
  <div id="box" style="height: 500px;width: 500px;"></div>
  <script>
    // console.log(G2Plot,'图表组件库');
    // 3. 引入图表构造函数
    // const { Line } = G2Plot;
    // const Line = G2Plot.Line
    // 4. 创建折线图的实例并渲染
    const line = new G2Plot.Line('box', {   //box为图表id
      // 图表的数据源
      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 },
      ],
      // x轴显示字段
      xField: 'year',
      // y轴显示字段
      yField: 'value',
      label: {},
      point: {
        size: 5,
        shape: 'diamond',
        style: {
          fill: 'white',
          stroke: '#5B8FF9',
          lineWidth: 2,
        },
      },
      tooltip: { showMarkers: false },
      state: {
        active: {
          style: {
            shadowBlur: 4,
            stroke: '#000',
            fill: 'red',
          },
        },
      },
      interactions: [{ type: 'marker-active' }],
    });
    line.render();
  </script>
</body>

数据映射

data 

设置图表数据源。数据源为对象集合。

xField

图形在 x 方向对应的数据字段名,一般是横向的坐标轴对应的字段。

yField

图形在 y 方向对应的数据字段名,一般是纵向的坐标轴对应的字段。

图形样式

point

折线数据点图形样式。

细分配置类型功能描述
colorstring | string[] | Function数据点颜色,也可以支持回调的方式设置,回调参数为 color: (datum: object) => string
shapestring | Function数据点形状,也可以支持回调的方式设置,回调参数为 shape: (datum: object) => string
sizenumber | Function数据点大小,也可以支持回调的方式设置,回调参数为 size: (datum: object) => number
styleobject | Function数据点样式,也可以支持回调的方式设置,回调参数为 style: (datum: object) => object
stateobject数据点状态样式,设置对应状态的样式。详细参考 state

state

设置对应状态的样式,开放的状态有:'default' | 'active' | 'inactive' | 'selected' 四种。

图表组件

label

文本标签的配置项,null 表示不展示。

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 `inner
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度,弧度制。顺时针旋转。
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置 (💡 注意:只对 geometry 为 interval 的柱条形图生效)
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

tooltip

指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。

图表交互

添加交互

// 开启「鼠标移入图表元素(柱状图的柱子、点图的点等)时触发 active」的交互
interactions: [{ type: 'element-active' }]

// 开启多个交互
interactions: [{ type: 'element-active' }, { type: 'brush' }]

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/941537.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

暴力递归转动态规划(一)

前两篇帖子介绍了暴力递归的过程&#xff0c;总的来说就是利用自然智慧不断的尝试。这篇文章则会介绍如何将暴力递归转成动态规划。 斐波那契数列 斐波那契数列一定都不陌生&#xff0c;规定第一列的值是1&#xff0c;第二列的值是2的话&#xff0c;那第七列的值就是13&#x…

2023Win11安装Oracle19c教程

2023Win11安装Oracle19c教程 一、下载安装二、安装三、配置四、navicat连接oracle 一、下载安装 进入官网&#xff0c;选择产品-Oracle DataBase&#xff0c;点击进入下载界面 点击跳转下载 选择19c进行下载 选择windows64位版本下载 登录账号后开始下载&#xff0c;等待下载…

1.3.1背包模型(一)

01背包 划分依据&#xff1a;依靠“最后一步”来划分 完全背包 多重背包 完全背包&#xff1a;求所有前缀的最大值 多重背包&#xff1a;求滑动窗口内的最大值 1.多重背包问题 III 有 N N N种物品和一个容量是 V V V的背包。 第 i i i种物品最多有 s i s_{i} si​件&…

激活函数总结(二十二):激活函数补充(Soft Exponential、ParametricLinear)

激活函数总结&#xff08;二十二&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Soft Exponential激活函数2.2 ParametricLinear激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、Leaky ReLU、PReLU、Swish、ELU、SE…

机器人制作开源方案 | 桌面级机械臂--仿真设计

1. Ros概述 ROS是一个适用于机器人编程的框架&#xff0c;这个框架把原本松散的零部件耦合在了一起&#xff0c;为它们提供了通信架构。ROS虽然叫做操作系统&#xff0c;但并非Windows、Mac那样通常意义的操作系统&#xff0c;它只是连接了操作系统和你开发的ROS应用程序&#…

AODV代码实现详解——原理与源码分析(一)

首先来几个标准参考&#xff1a; RFC 3561 RFC 3561 中文翻译 一个博客 挺好的另一个博客 事件&#xff1f; 字段长度&#xff1f; 事件驱动 各种定时器 状态转移图&#xff1f; AODV协议 基本概念 AODV&#xff08;Ad hoc On-Demand Distance Vector&#xff09;是一种基于…

Flutter问题记录 - Unable to find bundled Java version

新版本的Android Studio真的移除了JRE&#xff0c;jre目录找不到&#xff0c;怪不得报错了&#xff0c;不过多了一个jbr目录&#xff0c;找了个以前的Android Studio版本对比 搜了一下jbr&#xff08;JetBrains Runtime&#xff09;&#xff0c;原来IDEA老早就开始用了&#xf…

Redis 7 教程 数据持久化

总体 RDB 介绍 RDB 持久化以指定的时间间隔执行数据集的时间点快照 。 把某一时刻的数据和状态以文件的形式写到磁盘上,即使出现故障宕机,快照文件也不会丢失,数据的可靠性得到保证。快照文件就是RDB(Redis DataBase)文件(dump.rdb) 作用 在指定的时间间隔内将内存中的数…

财务数据分析怎么做?看看奥威BI数据可视化工具的解法

从以往的BI智能数据可视化分析项目来看&#xff0c;要想快刀砍乱麻地做好财务数据分析&#xff0c;为企业运营决策提供更加直观深入的数据支持&#xff0c;那就需要为财务数据分析做好数据导入、建模、报表制作、展示等多方面的准备。奥威BI数据可视化工具为此特意打造了一套标…

C#实战:基于腾讯OCR技术实现企业证书识别和数据提取实践

一、OCR技术介绍 在当今数字化时代&#xff0c;OCR&#xff08;Optical Character Recognition&#xff09;识别技术正发挥着越来越重要的作用。OCR技术通过将图像中的文字转化为可编辑的文本形式&#xff0c;实现了对大量纸质文档的数字化处理和信息提取。常见的有企业资质证…

【uniapp】 实现公共弹窗的封装以及调用

图例&#xff1a;红框区域为 “ 内容区域 ” 一、组件 <!-- 弹窗组件 --> <template> <view class"add_popup" v-if"person.isShowPopup"><view class"popup_cont" :style"{width:props.width&&props.width&…

【VLDB 2023】基于预测的云资源弹性伸缩框架MagicScaler,实现“高QoS,低成本”双丰收

开篇 近日&#xff0c;由阿里云计算平台大数据基础工程技术团队主导&#xff0c;与计算平台MaxCompute团队、华东师范大学数据科学与工程学院、达摩院合作&#xff0c;基于预测的云计算平台资源弹性伸缩框架论文《MagicScaler: Uncertainty-aware, Predictive Autoscaling 》被…

解锁市场进入成功:GTM 策略和即用型示例

在最初的几年里&#xff0c;创办一家初创公司可能会充满挑战。根据美国小企业管理局的数据&#xff0c;大约三分之二的新成立企业存活了两年&#xff0c;几乎一半的企业存活了五年以上。导致创业失败的因素有市场需求缺失、资金短缺、团队不合适、成本问题等。由此&#xff0c;…

Flutter可执行屏幕动画的AnimateView

1.让动画使用起来就像使用widget。 2.可自定义动画。 3.内置平移动画。 演示&#xff1a; 代码: import dart:math; import package:flutter/cupertino.dart;class AnimateView extends StatefulWidget {///子Widgetfinal Widget child;///动画自定义final IAnimate? anim…

什么,一条指令直接黑了数据库!

什么&#xff0c;一条指令直接黑了数据库&#xff01; shigen最近研究了一下一款渗透工具sqlMap。它一款流行的开源工具&#xff0c;用于自动化SQL注入攻击和渗透测试。它专门设计用于检测和利用Web应用程序中的SQL注入漏洞。SQLMap具有丰富的功能集&#xff0c;可自动检测和利…

工厂方法模式的概述和使用

目录 一、工厂方法模式概述1. 定义2. 使用动机 二、工厂方法模式结构1. 模式结构2. 时序图 三、工厂方法模式的使用实例四、工厂方法模式的优缺点五、工厂方法模式在Java中应用 原文链接 一、工厂方法模式概述 1. 定义 工厂方法模式(Factory Method Pattern)又称为工厂模式&…

高通面临难题,Oryon核心存在问题,高通8cx Gen 4芯片将推迟发布

"高通公司面临难题&#xff0c;可能会导致骁龙8cx Gen 4的发布时间推迟"&#xff0c;关于骁龙8cx Gen 4处理器&#xff0c;还有一些其他值得关注的特点和功能。首先&#xff0c;据悉&#xff0c;骁龙8cx Gen 4采用了高通自家研发的Oryon核心架构&#xff0c;这是一项…

春秋云镜 Brute4Road

flag1 fscan扫描发现&#xff0c;6379开放ftp可以匿名登录 这里直接尝试了去打redis但是只有主从复制能成功&#xff08;这里应该是靶场有设置吧&#xff0c;对6379操作过后再次操作就会显示端口拒绝访问直接重置就可以了&#xff09; 之后用脚本一把梭哈即可获得shell #更改…

C++ list模拟实现

list模拟实现代码&#xff1a; namespace djx {template<class T>struct list_node{T _data;list_node<T>* _prev;list_node<T>* _next;list_node(const T& x T()):_data(x),_prev(nullptr),_next(nullptr){}};template<class T,class Ref,class Pt…

好用的网页制作工具就是这6个,快点来看!

对于网页设计师来说&#xff0c;好用的网页设计工具是非常重要的&#xff0c;今天本文收集了6个好用的网页设计工具供设计师自由挑选使用。在这6个好用的网页设计工具的帮助下&#xff0c;设计师将获得更高的工作效率和更精致的网页设计效果&#xff0c;接下来&#xff0c;就一…