F2Chart
The graphics instruction generation engine uses graphics syntax theory to encapsulate the api, and finally generates drawing instructions to the drawing engine for drawing.
Create F2Chart instance
iOS
// define
/// Quickly create chart
/// @param size dp is the unit
/// @param name The name will be appended when outputting the log
+ (F2Chart *)chart:(CGSize)size name:(NSString *)name;
// demo
#import <F2/F2.h>
F2Chart *chart = [F2Chart chart:f2Canvas.view.bounds.size name:@"F2chart"];Android
F2Chart chart = F2Chart.create(context, "ChartName", width, height);- parameters
| Attribute Name | Type | Explanation |
|---|---|---|
size, width, height | Size | The size of the canvas to draw the graphics |
name | String | Custom graphic name, mainly used for log output |
Method
- canvas
Set the drawing engine instance corresponding to the current graphics command engine
iOS
chart.canvas(f2CanvasView);Android
chart.setCanvas(canvasView);- padding
set padding [left, top, right, bottom]
iOS
chart.padding(10, 0.f, 0.f, 0.f).;Android
chart.padding(10, 0.f, 0.f, 0.f).;- margin
Set graphics margin [left, top, right, bottom]
iOS
chart.margin(10, 0.f, 0.f, 0.f);Android
chart.margin(10, 0.f, 0.f, 0.f);### - source set data source #### iOS ````obj-c NSString *jsonString = @"[{\"date\":\"2010-01-10\",\"value\":99.9}{\"date\":\"2010-02-10\",\ "value\":96.7},{\"date\":\"2010-03-10\",\"value\":100.2}]" chart.source(jsonString); ````
Android
chart.source(jsonString);- parameters
| Attribute Name | Type | Explanation |
|---|---|---|
json | String | Drawing data jsonString, must be of type jsonArray |
- scale
set metric
iOS
chart.scale(@"date", @{@"type":@"identity", @"scaleRange": @[@(0.1), @(0.9)] });
chart.scale(@"value", @{ @"precision": @(1), @"max": @(200), @"min": @(0)});Android
chart.setScale("value", new F2Chart.ScaleConfigBuilder().max(100).min(20));
chart.setScale("date", new F2Chart.ScaleConfigBuilder().tickCount(5));- parameters
| Attribute Name | Type | Explanation |
|---|---|---|
field | String | The name of the data currently to be measured in source |
config | Dictionary | The specific configuration information of the measurement see here |
- Coord
set coordinate system
iOS
chart.coord(@{@"type": @"polar", @"transposed": @(YES)});Android
// TODO- parameters Type: Dictionary
| Attribute Name | Type | Explanation |
|---|---|---|
type | String | polar - polar coordinates rect - plane rectangular coordinates |
transposed | BOOL | whether to flip |
- Axis
Set the coordinate axis configuration; the coordinate axis of F2-Native is composed as follows
iOS
chart.axis(@"date", @{ @"grid": @(NO) });
chart.axis(@"value", @{
@"line": @(NO),
@"grid": @{
@"type": @"dash",
@"lineWidth": @(1.0f),
@"stroke": @"#E6E6E6",
@"lineDash": @[@(6),@(3)]
},
@"label": @{ @"textColor": @"#cccccc" ,@"textAlign":@"end",@"labelOffset":@(5)}
});Android
chart.setAxis("year", new F2Chart.AxisConfigBuilder()
.label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5.f))
.gridHidden());
chart.setAxis("sales", new F2Chart.AxisConfigBuilder()
.label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5))
.grid(new F2Chart.AxisGridConfigBuilder().type("dash"))
.line(new F2Chart.AxisLineConfigBuilder().lineWidth(1).color("#E6E6E6").type("dash").lineDash(new double[]{6, 3})));- parameters
| Attribute Name | Type | Explanation |
|---|---|---|
field | String | The name of the data represented by the current axis in source |
config | Dictionary | The specific configuration information of the coordinate axis see here for details |
- Line
Create a line instance; F2Line configuration information see here
- Interval
Create a column instance; F2Interval configuration information see here
- Area
Create a shadow instance; F2Area configuration information see here
- Guide
Create an auxiliary instance; the configuration information of F2Guide see here for details
- OnTouchEvent
Send interactive gesture information
iOS
- (void)handleGestureInfo:(NSDictionary *)info {
// do something
chart.OnTouchEvent(info);
}Android
// TODO- return data format
| Attribute Name | Type | Explanation |
|---|---|---|
info | Dictionary | If there is no special need, the info information of the callback can be returned directly |
- legend
legend(filed,config); // set legend
iOS
chart.legend(@"type", @{@"radius": @(3), @"symbol": @"square"});
}Android
// TODO- return data format
| Attribute Name | Type | Explanation |
|---|---|---|
filed | String | Returns the name of the corresponding field to display the legend |
config | Dictionary | Configuration information see here |
- render
render operation
iOS
// ...
// After the chart configuration and graphic elements are created, start rendering
chart.render();Android
// ...
// The chart configuration and graphic elements are created, start rendering
chart.render();