logoCreated with Sketch.

F2Native

基础折线图

阅读时间约 1 分钟

演示

数据（jsonString）

下述 jsonData 对应数据

[{"time": "Jan.","tem": 1000}, {"time": "Feb.","tem": 2200}, 
 {"time": "Mar.","tem": 2000}, {"time": "Apr.","tem": 2600}, 
 {"time": "May.","tem": 2000}, {"time": "Jun.", "tem": 2600},
 {"time": "Jul.","tem": 2800}, {"time": "Aug.","tem": 2000}]

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(@"date", @{@"tickCount": @(5)});
chart.scale(@"value", @{@"min": @(10), @"max": @(320)});
chart.axis(@"date", @{@"grid": @(NO)});
chart.line().position(@"date*value").fixedSize(2);
chart.tooltip(@{});
chart.interaction(@"pinch");
chart.interaction(@"pan");
chart.render();

Android

mChart.setCanvas(canvasView);
mChart.padding(10, 0, 0, 0);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "mockData_singleLineChart.json"));
mChart.interaction("pinch");
mChart.tooltip(new F2Chart.ToolTipConfigBuilder());
mChart.line().position("date*value");
mChart.setAxis("date", new F2Chart.AxisConfigBuilder() .label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5.f)) .gridHidden());
mChart.setAxis("value", new F2Chart.AxisConfigBuilder() .grid(new F2Chart.AxisGridConfigBuilder().type("dash")));
mChart.setScale("date", new F2Chart.ScaleConfigBuilder().tickCount(5));
mChart.setScale("value", new F2Chart.ScaleConfigBuilder().min(10).max(340));
mChart.render();