antvis / Wx F2
Licence: mit
F2 的微信小程序
Stars: ✭ 1,109
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Wx F2
Zingchart Php
Wrapper for ZingChart for easy chart manipulation and interactivity for PHP users.
Stars: ✭ 41 (-96.3%)
Mutual labels: charts
Helm Diff
A helm plugin that shows a diff explaining what a helm upgrade would change
Stars: ✭ 1,035 (-6.67%)
Mutual labels: charts
Weixin Minigame Tutorial
Flappy Bird adaptation on Wechat Minigame using PhaserJS + English Wechat Minigames Tutorial
Stars: ✭ 56 (-94.95%)
Mutual labels: weixin
Kdchart
A Qt tool for creating business and scientific charts. This is the canonical repository for KDChart.
Stars: ✭ 42 (-96.21%)
Mutual labels: charts
React Google Sheet To Chart
📊 React component that renders Google Sheets as attractive charts with minimum effort
Stars: ✭ 45 (-95.94%)
Mutual labels: charts
Otganttchartkit
OTGanttChartKit is gantt chart framework for iOS. This framework use easily like UITableView.
Stars: ✭ 38 (-96.57%)
Mutual labels: charts
Pega Helm Charts
Orchestrate a Pega Platform™ deployment by using Docker, Kubernetes, and Helm to take advantage of Pega Platform Cloud Choice flexibility.
Stars: ✭ 58 (-94.77%)
Mutual labels: charts
Javafx Dataviewer Wrapper
📊 Exposing charts from Java to JavaFX and the Web!
Stars: ✭ 56 (-94.95%)
Mutual labels: charts
Trading Vue Js
💹 Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.
Stars: ✭ 1,021 (-7.94%)
Mutual labels: charts
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-95.49%)
Mutual labels: charts
Unity Ugui Xcharts
A charting and data visualization library for Unity. 一款基于UGUI的数据可视化图表插件。
Stars: ✭ 1,086 (-2.07%)
Mutual labels: charts
Dragtodismiss Pangesture
仿微信,微博的大图查看和视频播放 拖拽消失的手势动画。手势单独已抽离出来,可用于任何视图。Simulate Wechat's disappeared gesture animation by dragging when the big picture viewing or video playback . Gestures are separated and can be used in any view
Stars: ✭ 55 (-95.04%)
Mutual labels: weixin
F2 微信小程序
F2 的微信小程序版本,支持原生 F2 的所有功能,欢迎使用反馈。
快速体验
- 微信扫码体验
- 使用微信开发者工具打开此项
说明
为了方便使用,我们封装了微信小程序的自定义组件,故需要微信小程序支持使用 npm 安装第三包。
重要:版本要求
- 小程序基础库版本 2.7.0 或以上
- 开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。
如何使用
1. 安装依赖
项目默认初始化出来的是没有package.json
的,需要新增package.json
后再安装
## 没有package.json时执行下面这段
## echo "{}" > package.json
npm install @antv/wx-f2 --save
安装好依赖包之后,点击工具顶部菜单栏的详情:
勾选“使用 npm 模块”选项:
最后点击开发者工具中的菜单栏:工具 --> 构建 npm 即可运行。
如果碰到 @babel/runtime 未找到npm包入口文件,直接忽略就行了,不影响使用(强迫症碍眼的话,手动删除node_modules/@babel/runtime
目录)
rm -rf node_modules/@babel/runtime
2. 使用自定义组件
1. 打开json文件,引入组件
{
"usingComponents": {
"f2": "@antv/wx-f2"
}
}
2. wxml 使用组件
<view class="container">
<f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>
3. wxss 设置宽高
.f2-chart {
width: 100%;
height: 500rpx;
}
4. 实例化图表
Page({
data: {
onInitChart(F2, config) {
const chart = new F2.Chart(config);
const data = [
{ value: 63.4, city: 'New York', date: '2011-10-01' },
{ value: 62.7, city: 'Alaska', date: '2011-10-01' },
{ value: 72.2, city: 'Austin', date: '2011-10-01' },
{ value: 58, city: 'New York', date: '2011-10-02' },
{ value: 59.9, city: 'Alaska', date: '2011-10-02' },
{ value: 67.7, city: 'Austin', date: '2011-10-02' },
{ value: 53.3, city: 'New York', date: '2011-10-03' },
{ value: 59.1, city: 'Alaska', date: '2011-10-03' },
{ value: 69.4, city: 'Austin', date: '2011-10-03' },
];
chart.source(data, {
date: {
range: [0, 1],
type: 'timeCat',
mask: 'MM-DD'
},
value: {
max: 300,
tickCount: 4
}
});
chart.area().position('date*value').color('city').adjust('stack');
chart.line().position('date*value').color('city').adjust('stack');
chart.render();
// 注意:需要把chart return 出来
return chart;
}
},
});
API
- F2 API 参见:https://f2.antv.vision/zh/docs/api/f2
如何贡献
如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].