在钉钉小程序中使用可视化图表插件F2

最新推荐文章于 2024-02-05 15:03:38 发布
最新推荐文章于 2024-02-05 15:03:38 发布
阅读量1k 收藏 1
点赞数
分类专栏： 自学前端 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44180190/article/details/123260609
版权
本文介绍了如何在钉钉小程序中集成并使用阿里系的F2图表库，通过onInit函数绑定初始化，并展示了一个堆叠折线图的实例。详细步骤及F2在支付宝小程序的官方文档链接也一并提供。
摘要由CSDN通过智能技术生成

阿里系的可视化图表如何使用？看下面的代码

 <view class="f2-chart">
    <f2 onInit="onInitChart"></f2>
  </view>

onInit 绑定初始化函数

  onInitChart(F2, config) {
   
    const chart = new F2.Chart(config)
    const data =
最低0.47元/天 解锁文章
(´ꑣ｀)走啊，去学习
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
钉钉小程序使用antv/my-f2
qq_40092909的博客
03-15 2204
移动端小程序使用antv/my-f2，antv/f2不适合小程序使用 小程序开发者工具引入@antv/my-f2 开发环境引入(使用npm 或 cnpm) 开发依赖直接开发工具导入失败 所以手动导入 npm install @antv/my-f2 --save -dev cnpm install @antv/my-f2 --save -dev 下载完成后，进行init配置package.json 直接空格即可自动根据依赖生成 npm init 或者 cnpm init 生成json自动添加在packag
钉钉全码组件实战（三）
最新发布
Meteor100001的博客
08-06 189
根据实际开发情况添加插件信息。
钉钉小程序 antv/my-f2 半环形图表 渐变环形
sleepy_MaWQ的博客
02-05 429
钉钉小程序 antv/my-f2 + antv-f2 半环形图表 渐变环形
钉钉小程序使用charts_使用Google Charts API和AngularJS创建可视化应用程序–第4部分...
03-11 230
钉钉小程序使用charts 在本系列的第一 ， 第二和第三部分中，我们重点介绍了AngularJS的各个方面，例如指令，控制器，作用域和双向数据绑定功能。 在本系列的最后一部分中，我们将学习如何基于Twitter Bootstrap的标记和UI Bootstrap中的 CSS集成AngularJS指令。 引导应用 首先，让我们使用Twitter Bootstrap使我们的应用程序外观整洁。...
钉钉小程序图表@antv/my-f2，Cannot find module ‘xxx‘及使用步骤。
weixin_42463849的博客
08-16 2163
最近做钉钉小程序，需要用图表，上网找了一圈，推荐用阿里的antv-f2。 我用的是原生的开发工具，我通过命令npm install @antv/my-f2安装好了，然后根据官网文档写好了，编译的时候提示找不到包。 解决办法如下： 把包先uninstall，之后通过原生工具安装就能正常的使用了 不知道你们会不会也会遇到这个问题，也许就我这边有这个问题，就简单记录下，希望能给遇到同样问题的你提供一点点帮助，要不遇到就更好啦~ —分割线— 语雀文档： https://www.yuque.com/antv/f2
使用Google Charts API和AngularJS创建可视化应用程序–第3部分
02-21 173
在第一和第二本系列的部分，我们专注于AngularJS控制器和指令。 在这一部分，我们将专注于双向数据绑定AngularJS的功能。 数据AngularJS绑定 角度的数据绑定允许改变一个模型来自动地反映在视图，反之亦然。 AngularJS数据的详细说明结合可以发现在这里 。 我们将增加一些功能，我们的可视化应用程序。 首先，我们将添加一个下拉在这里我们可以选择的图表类型。 让我们在下拉...
使用Google Charts API和AngularJS创建可视化应用程序–第2部分
02-05 106
在本教程的第一部分侧重于使用AngularJS控制器和使用$scope 。 本教程将集中在角的这部分伪指令的关系$scope 。 我们会从我们的第一篇文章中离开的确切位置在哪里开始。 AngularJS指令 指令是AngularJS的另一个有趣和重要的方面。 指令是自定义标签或属性，增强HTML的能力。 例如，考虑一个简单的input元件： <input type="text" /&...
在小程序中使用Echart图表的示例代码
10-18
在小程序开发中，集成Echart图表是一种常见的数据可视化方式，它可以帮助用户更直观地理解复杂的数据。Echart是一款强大的JavaScript图表库，提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持高度自定义，...
在微信小程序开发中使用 @antv/wx-f2可视化方案
weixin_43736435的博客
11-01 2474
关于微信小程序使用 npm 安装第三包 1、首先我们需要npm安装@antv/wx-f2 npm install @antv/wx-f2 --save --production 2、在需要使用的页面或组件的json文件中，引入第三方组件 { "usingComponents": { "f2": "@antv/wx-f2" } } 3、在wxml中使用组件 <view class="container"> <f2 class="f2-chart" onIn
HTML5图表框架echarts实战项目(50套源码)，大数据平台展示可视化效果
02-09
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
钉钉Weex微应用与微信小程序对比表格
03-29
程序构建 weex微应用 微信小程序 通过webpack打包构建成一个纯JavaScript文件，需要开发者自己写打包脚本，非常灵活。 通过IDE打包，打包路径是一个黑盒，不需要开发者写打包脚本，必须按照它的规则书写入口以及业务代码。 代码包无限制大小 限制大小2M 无配置文件 需要入口配置文件来配置页面必须依赖的Path 应用设计指南 weex微应用 微信小程序 无 包含了视觉，交互等常规设计 微信小程序设计指南 应用接入指南 weex微应用 微信小程序 有，但是很分散 包含了应用接入指南主体 微信小程序接入指南 数据 weex微应用 微信小程序 无 可查看运营数据 小程序数据助手，这是发布
react-native-f2chart:F2本机图表
05-11
react-native-f2chart 本机图表 安装 1， yarn add react-native-f2chart or npm i react-native-f2chart 2，将node_moules/react-native-f2chart/src/f2chart.html到android/app/src/main/assets/f2chart.html 简单的演示 用法 import Chart from "react-native-f2chart" ; // 参考 https://antv.alipay.com/zh-cn/f2/3.x/demo/line/basic.html const initScript = data => ` (function(){ chart = new F2.Chart({ id: 'chart',
Unity数据可视化图表插件XCharts（ 一款基于UGUI的数据可视化图表插件）
zyc946的博客
07-05 7116
一、前言 今天，我在GitHub上看到一个屌炸天的Unity插件：XCharts，，XCharts插件是一款基于Unity3D的UGUI系统的插件，可以绘制折线图、曲线图、饼状图、雷达图、散点图、热力图等等，功能强大 二、Unity数据可视化图表插件：XCharts GitHub地址：monitor1394/unity-ugui-XCharts 1、运行效果 话不多说，运行看看效果： 非常强大的图表功能，满足可视化开发。 2、文档教程 插件的Github地..
f2 柱状图滚动 钉钉小程序_钉钉小程序----使用阿里的F2图表
weixin_39574246的博客
02-15 178
Component({data:{chartDataNew1: [{title:'掘进',ring:'163',value:16}, {title:'掘进',ring:'175',value:26}, {title:'停机',ring:'163',value:16}, {title:'停机',ring:'175',value:26}, {title:'拼环',ring:'163',value:36...
钉钉小程序内使用uCharts，各种花里胡哨图表都可以
qq_43258522的博客
11-09 784
最近做钉钉小程序需要使用到图表展示的功能，刚开始想到antd/f2，但是放在钉钉小程序里是有各种问题的，支付宝官方网上推荐使用antd/my-f2，用了之后还是会存在一些问题，比如环形图图上的点击事件是拿不到的，点击某区域放大效果也是不生效，索性放弃了它，找到uCharts。
小程序-小程序图表库（F2图表库）
西京刀客
06-30 1890
小程序图表库 f2 F2 的支付宝小程序版本（待支付宝支持自定义组件后，会基于此库提供一个支付宝小程序的组件）。 github：https://github.com/antvis/my-f2 mini-chart 支付宝小程序图表库mini-chart 和上面小程序版本不同之处在于，my-f2是用f2的方式较为自定义底层地绘制，而mini-chart是封装成了自定义组件的形式，在使用上要简单些。 github：https://github.com/ant-mini-program/mini-char
钉钉开放平台-小程序开发实战（钉钉小程序客户端）
热门推荐
西京刀客
06-25 1万+
钉钉（Ding Talk）是阿里巴巴集团打造的企业级智能移动办公平台，是数字经济时代的企业组织协同办公和应用开发平台。 钉钉开放平台具有强大丰富的原生能力，目前已经开放超过2000个API接口，同时为开发者和服务商提供专业的技术培训体系，分享最新功能和开放能力，提供全面的服务支持。...
在钉钉接口，根据日期，动态变化数据和饼图
lany365的博客
12-14 480
个人绩效奖金池 {{organization}}-{{userName}} {{myMoney}}
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值