logoCreated with Sketch.

F2Native

F2Line

3 min read

Graphic line object, used to draw line graphs

Create F2Line Instance

iOS

  F2CanvasView *f2CanvasView = [F2CanvasView canvas:CGRectMake(0, 0, 280, 280)];
  F2Chart *chart = [F2Chart chart:f2CanvasView.bounds.size name:@"F2chart"];
  chart.line();

Android

  chart.line();

Method

- position

where to draw the column chart

iOS

  chart.line().position(@"date*value");

Android

chart.line().position("date*value");
  • parameters
Parameter nameTypeExplanation
attrStringX*Y: The name of the drawn bar in source, this attribute is required.

- color

Set the color of a set of lines

iOS

  chart.line().position(@"date*value").color(@"type", @[ @"#1890FF", @"#2FC25B", @"#FACC14" ]);

Android

  chart.line().position(@"date*value").color("type", new String[]{"#1890FF", "#2FC25B", "#FACC14"});
  • parameters
Parameter nameTypeExplanation
fieldStringgrouping field
colorArray<String>Set the color value corresponding to different field at one time, you can directly pass an empty array

- fixedColor

set uniform color

iOS

  chart.line().position(@"date*value").fixedColor(@"#1890FF");

Android

  chart.line().position("date*value").fixedColor("#1890FF");
  • parameters
Parameter nameTypeExplanation
colorStringAll field correspond to a uniform color value

- fixedSize

Set uniform line width

iOS

  chart.line().position(@"date*value").fixedSize(1);

Android

  chart.line().position("date*value").fixedSize(1);
  • parameters
Parameter nameTypeExplanation
sizefloatAll fields set a uniform line width (dp)

- size

set line width

iOS

  chart.line().position(@"date*value").size(@"type", @[@(1), @(2), @(3)]);

Android

  chart.line().position("").size("", new float[]{1, 2, 3});
  • parameters
Parameter nameTypeExplanation
fieldStringgrouping field
sizeArray<float>Corresponding line width values ​​after grouping by field field

- fixedShape

Set uniform type for all lines

iOS

  chart.line().position(@"date*value").fixedShape(@"smooth");

Android

  chart.line().position("date*value").fixedShape("smooth");
  • parameters
Parameter nameTypeExplanation
shapeStringsmooth - smooth curve, line - straight line (default), dash - dashed line

- shape

Set the type of each group of lines

iOS

  chart.line().position(@"date*value").shape(@"type", @[@"smooth", @"smooth", @"smooth"]);

Android

  chart.line().position("date*value").shape("type", new String[]{"smooth", "smooth", "smooth"});
  • parameters
Parameter nameTypeExplanation
fieldStringgrouping field
shapeArray<String>smooth - smooth curve, line - straight line (default), dash - dashed line