logoCreated with Sketch.

F2Native

F2Interval

2 min read

Graphical column object, the user draws the column chart

Create F2Interval instance

iOS

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

Android

  chart.interval();

Method

- position

where to draw the column chart

iOS

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

Android

  chart.interval().position("date*value");
  • parameters
Attribute NameTypeExplanation
attrStringX*Y: The name of the drawn bar in source

- fixedColor

Set column fill color

iOS

  chart.interval().position(@"date*value").fixedColor(@"#108EE9");

Android

  chart.interval().position("date*value").fixedColor("#108EE9");
  • parameters
Attribute NameTypeExplanation
colorStringSet the color of the area fill (Hex rgb)

- color

Set the color of the grouped column fill

iOS

  chart.interval().position(@"date*value").color(@"type", @[@"#108EE9", @"#2FC25B"]);

Android

  chart.interval().position("date*value").color("type", new String[]{"#108EE9", "#2FC25B"});
  • parameters
Attribute NameTypeExplanation
fieldStringData grouping field
colorArray<String>Set the color of the area fill (Hex rgba)

- tag

Set column labels

iOS

  chart.interval().position(@"date*value").tag(
        @{
          @"fill": @"#999999",
          @"textAlign":@"center",
          @"textBaseline":@"bottom"
          @"textSize": @(10),
          @"offset":@(-12)
        }
  )
;

Android

  • parameters
Attribute NameTypeExplanation
fillStringLabel color (Hex rgb)
textAlignStringAlignment
center(default) center
start top
end bottom
left left
right Align right
textBaselineStringAlignment baseline
alphabetic (default)
top
hanging
middle
ideographic
bottom
textSizeNumberText size
offsetNumberOffset in y direction and column distance