Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antvis/f2native
📱📈An elegant, interactive and flexible native charting library for mobile.
https://github.com/antvis/f2native
android antv antvis data-vis f2 grammer ios macos mobile visualization
Last synced: about 4 hours ago
JSON representation
📱📈An elegant, interactive and flexible native charting library for mobile.
- Host: GitHub
- URL: https://github.com/antvis/f2native
- Owner: antvis
- License: mit
- Created: 2020-11-16T02:32:17.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-09T18:39:37.000Z (5 months ago)
- Last Synced: 2024-10-29T12:31:40.411Z (17 days ago)
- Topics: android, antv, antvis, data-vis, f2, grammer, ios, macos, mobile, visualization
- Language: C++
- Homepage: https://f2native.antv.vision
- Size: 42.9 MB
- Stars: 217
- Watchers: 27
- Forks: 22
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - f2native - 📱📈An elegant, interactive and flexible native charting library for mobile.  (Components / Data Visualization)
README
 
[ä¸æ–‡ README](./README_cn.md)
F2Native is born for mobile visual development. It is out-of-the-box,cross-platform, high-performance visualization solution . Support Android, iOS and MacOS perfect,moreover have high-performance experience in low-end mobile. Based on [the grammar of graphics](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), F2Native provides all the chart types you'll need. Our mobile design guidelines enable better user experience in mobile visualzation projects.
> Special thanks to [Leland Wilkinson](https://en.wikipedia.org/wiki/Leland_Wilkinson), the author of [*The Grammar Of Graphics*](https://www.cs.uic.edu/~wilkinson/TheGrammarOfGraphics/GOG.html), whose book served as the foundation for F2Native and F2.
## Features
### Focus on the mobile,extreme experience
F2Native supports Android, iOS And MacOS. Using the cross-platform language C++ to generate the underlying drawing commands，
can achieve **cross-platform, unified experience, high-performance experience**. After packaging on Android and iOS, the APK and IPA size are **250KB and 500KB** respectively.
### Light and natural
make data more alive and chart interactions more natural.
### All the chart types you want
With the power of grammar of graphics, F2Native including classical charts such as line, column/bar chart, pie chart. Additionally, F2 also provides feature-riched chart components to meet various needs.
## Links
* [Website](https://f2native.antv.vision/)
* English documents: https://f2native.antv.vision/en
* ä¸æ–‡æ–‡æ¡£: https://f2native.antv.vision/zh
## Demos
[Chart Demos](https://f2native.antv.vision/en/docs/examples/line/line)
[Video Demos]
https://github.com/antvis/F2Native/assets/5905640/de909209-608a-4be9-95e1-4a9edeb73eec
### iOS
#### CocoaPod Setup
```pod
pod 'F2'
```
#### Objective-C
```obj-c
#import
@interface F2Demo : UIView
@property (nonatomic, strong) F2CanvasView *canvasView;
@end
@implementation F2Demo
-(NSString *)jsonData {
return @"[
{\"genre\":\"Sports\",\"sold\":275},
{\"genre\":\"Strategy\",\"sold\":115},
{\"genre\":\"Action\",\"sold\":120},
{\"genre\":\"Shooter\",\"sold\":350},
{\"genre\":\"Other\",\"sold\":150}]";
}
- (void)chartRender {
self.chart.canvas(self.canvasView);
self.chart.padding(10, 20, 10, 0.f);
self.chart.source([self jsonData]);
self.chart.interval().position(@"genre*sold").color(@"genre", @[]);
self.chart.scale(@"sold", @{@"min": @(0)});
self.chart.scale(@"genre", @{@"range": @[@(0.1), @(0.9)]});
self.chart.render();
}
```
#### Swift
```swift
func chartRender() {
self.chart!.canvas()(self.canvasView!)
self.chart!.padding()(10, 20, 10, 0)
self.chart!.source()(jsonData)
self.chart!.interval()().position()("genre*sold").color()("genre", [])
self.chart!.scale()("sold", ["min":0])
self.chart!.scale()("genre", ["range": [0.1, 0.9]])
self.chart!.render()();
}
```
### Android
#### Gradle Setup
```gradle
repositories {
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.antvis:F2Native:latest.release'
}
```
#### XML
```xml
```
#### Java
```java
F2CanvasView canvasView = findViewById(R.id.canvasView);
canvasView.initCanvasContext();
canvasView.setAdapter(new F2CanvasView.Adapter() {
private F2Chart mChart;
@Override
public void onCanvasDraw(F2CanvasView canvasView) {
if (mChart == null) {
mChart = F2Chart.create(canvasView.getContext(), "SingleIntervalChart_2", canvasView.getWidth(), canvasView.getHeight());
}
mChart.setCanvas(canvasView);
mChart.padding(20, 10, 10, 10);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "mockData_singleIntervalChart_2.json"));
mChart.interval().position("genre*sold").color("genre");
mChart.setScale("sold", new F2Chart.ScaleConfigBuilder().min(0));
mChart.setScale("genre", new F2Chart.ScaleConfigBuilder().range(new double[]{0.1, 0.9}));
mChart.render();
}
@Override
public void onDestroy() {
if (mChart != null) {
mChart.destroy();
}
}
});
```
#### Kotlin
```java
mCanvasView = findViewById(R.id.canvasView)
mCanvasView!!.initCanvasContext()
private var mChart: F2Chart? = null
override fun onCanvasDraw(canvasView: F2CanvasView) {
if (mChart == null) {
mChart = F2Chart.create(
canvasView.context,
"SingleIntervalChart_2",
canvasView.width.toDouble(),
canvasView.height.toDouble()
)
}
mChart!!.setCanvas(canvasView)
mChart!!.padding(20.0, 10.0, 10.0, 10.0)
mChart!!.source(loadAssetFile(canvasView.context, "mockData_singleIntervalChart_2.json"))
mChart!!.interval().position("genre*sold").color("genre")
mChart!!.setScale("sold", ScaleConfigBuilder().min(0.0))
mChart!!.setScale("genre", ScaleConfigBuilder().range(doubleArrayOf(0.1, 0.9)))
mChart!!.legend(
"genre",
LegendConfigBuild().enable(true).position("top").symbol("circle").setOption("radius", 3)
)
mChart!!.render()
}
override fun onDestroy() {
if (mChart != null) {
mChart!!.destroy()
}
}
```
## How to Contribute
Please let us know how can we help. Do check out [issues](https://github.com/antvis/f2native/issues) for bug reports or suggestions first.
To become a contributor, please follow our [contributing guide](https://github.com/antvis/f2native/blob/master/CONTRIBUTING.md).
## License
[MIT license](./LICENSE)