logoCreated with Sketch.

F2Native

对比折线图

阅读时间约 1 分钟

演示

数据（jsonString）

下述 jsonData 对应数据 绘图数据

iOS

F2CanvasView *canvasView = [F2CanvasView canvas:self.frame];
F2Chart *chart = [F2Chart chart:canvasView.bounds.size name:NSStringFromClass([self class])];
chart.canvas(canvasView).padding(20, 10, 20, 0.f).source(jsonData);
chart.scale(@"value", @{@"min": @(0)});
chart.scale(@"date", @{@"tickCount": @(3)});
chart.axis(@"date", @{@"grid": @(NO), @"label": @{@"textAlign": @"start"}});
chart.line().position(@"date*value").color(@"type", @[]).fixedSize(2).fixedShape(@"smooth");
chart.legend(@"type", @{@"radius": @(3), @"symbol": @"square"});
chart.tooltip(@{});
chart.render();

Android

mChart.setCanvas(canvasView);
mChart.padding(10, 0, 0, 0);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "mockData_multilines.json"));
mChart.line().position("date*value").color("type") .fixedSize(1.f) .fixedShape("smooth");
mChart.setAxis("date", new F2Chart.AxisConfigBuilder() .label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5.f)));
mChart.setScale("date", new F2Chart.ScaleConfigBuilder().tickCount(5));
mChart.setScale("value", new F2Chart.ScaleConfigBuilder().min(30).max(160));
mChart.tooltip(new F2Chart.ToolTipConfigBuilder());
mChart.render();