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(@"date", @{@"tickCount": @(5)});
chart.scale(@"value", @{@"min": @(0)});
chart.axis(@"date", @{@"grid": @(NO), @"label": @{@"textAlign": @"start"}});
chart.line().adjust(@"stack").position(@"date*value").color(@"city", @[]).fixedSize(2);
chart.area().adjust(@"stack").position(@"date*value").color(@"city", @[]).fixedSize(2);
chart.render();

Android

mChart.setCanvas(canvasView);
mChart.padding(10, 0, 0, 0);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "mockData_multiAreasChart.json"));
mChart.area().position("date*value").color("city").adjust("stack");
mChart.line().position("date*value").color("city").adjust("stack");
mChart.setAxis("date", new F2Chart.AxisConfigBuilder() .label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5.f)));
mChart.setScale("date", new F2Chart.ScaleConfigBuilder().tickCount(5));
mChart.render();