logoCreated with Sketch.

F2Native

F2Chart

阅读时间约 3 分钟

图形指令生成引擎,使用图形语法理论封装 api，并最终生成绘制指令交给绘制引擎进行绘制。

创建 F2Chart 实例

iOS

// 定义
/// 快捷创建chart
/// @param size dp为单位
/// @param name 输出日志时会附加name
+ (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);
  • 参数
属性名类型解释
size, width, heightSize绘制图形的画布大小
nameString自定义图形名称，主要用做日志输出

方法

- canvas

设置当前图形指令引擎对应的绘制引擎实例

iOS

  chart.canvas(f2CanvasView);

Android

  chart.setCanvas(canvasView);

- padding

设置 padding [left, top, right, bottom]

  chart.padding(10, 0.f, 0.f, 0.f).;

- margin

设置图形 margin [left, top, right, bottom]

  chart.margin(10, 0.f, 0.f, 0.f);

### - 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);
  • 参数
属性名类型解释
jsonString绘图数据 jsonString, 必须为 jsonArray 类型

- scale

设置度量

iOS

  chart.scale(@"date", @{@"type":@"identity", @"range": @[@(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().range(new double[]{0.1, 0.9}).tickCount(5));
  • 参数
属性名类型解释
fieldString当前需要度量的数据在 source 中的名称
configDictionary度量的具体配置信息详见这里

- coord

设置坐标系

iOS

  chart.coord(@{@"type": @"polar", @"transposed": @(YES)});

Android

  chart.setCoord(new F2Chart.CoordConfigBuilder().type("polar").transposed(true));
  • 参数 类型：Dictionary
属性名类型解释
typeStringpolar - 极坐标
rect - 平面直角坐标
transposedBOOL是否翻转

- axis

设置坐标轴配置；F2Native 的坐标轴组成如下

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})));
  • 参数
属性名类型解释
fieldString当前坐标轴所代表的数据在 source 中的名称
configDictionary坐标轴的具体配置信息详见这里

- line

创建线实例；F2Line 的配置信息详见这里

- interval

创建柱实例；F2Interval 的配置信息详见这里

- area

创建阴影实例；F2Area的配置信息详见这里

- guide

创建辅助实例；F2Guide的配置信息详见这里


- TouchEvent

发送交互手势信息

iOS

 - (void)handleGestureInfo:(NSDictionary *)info {
    // do something
    chart.postTouchEvent(info);
}

Android

canvasView.setOnCanvasTouchListener(new F2CanvasView.OnCanvasTouchListener() {
    @Override
    public void onTouch(F2CanvasView canvasView, F2CanvasView.TouchEvent event) {
        chart.postTouchEvent(event);
    }
});

- interaction

指定图形实例需要处理的手势类型

chart.interaction("pinch"); // 开启缩放手势
chart.interaction("pan"); // 开启平移手势
  • 参数
属性名类型解释
typeString手势类型: pinch(缩放), pan(平移)

- tooltip

指定长按交互属性

chart.tooltip(@{...});

  • 属性

    {"alwaysShow": false}, // 是否一直显示
{"crosshairsStyle": {"stroke": "#1890FF", "lineWidth": 1, "type": "dash", "dash": [4, 4]}}, // 十字线样式

- legend

legend(field, config); // 设置图例

iOS

   chart.legend(@"type", @{@"radius": @(3), @"symbol": @"square"});
}

Android

chart.legend("genre", new F2Chart.LegendConfigBuild().symbol("circle").setOption("radius", 3));
  • 返回数据格式
属性名类型解释
filedStirng返回需要展示图例的对应字段名称
configDictionary配置信息详见这里

- render

渲染操作

  chart.render();