logoCreated with Sketch.

F2Native

条状图

阅读时间约 1 分钟

演示

数据（jsonString）

下述 jsonData 对应数据

[{"year": "1951 年","sales": 38}, {"year": "1952 年","sales": 52}, 
 {"year": "1956 年","sales": 61}, {"year": "1957 年","sales": 145}, 
 {"year": "1958 年","sales": 48}, {"year": "1959 年","sales": 38}, 
 {"year": "1960 年","sales": 38}, { "year": "1962 年","sales": 38}]

iOS

F2CanvasView *canvasView =[F2CanvasView canvas:self.frame];
F2Chart *chart = [F2Chart chart:canvasView.bounds.size name:NSStringFromClass([self class])];
chart.coord(@{@"transposed":@(YES)});
chart.scale(@"sales",@{@"min":@(0)});
chart.scale(@"year", @{ @"range": @[@(0.1), @(0.9)] });
chart.interval().position(@"year*sales");
chart.render();

Android

mChart.setCanvas(canvasView);
mChart.padding(10, 0, 0, 0);
mChart.source(Utils.loadAssetFile(canvasView.getContext(), "mockData_singleIntervalChart.json"));
mChart.interval().position("year*sales");
mChart.setAxis("year", new F2Chart.AxisConfigBuilder()
.label(new F2Chart.AxisLabelConfigBuilder()
.labelOffset(5.f)).gridHidden());
mChart.setCoord(new F2Chart.CoordConfigBuilder()
.type("rect").transposed(true));
mChart.setAxis("sales", new F2Chart.AxisConfigBuilder()
.label(new F2Chart.AxisLabelConfigBuilder().labelOffset(5))
.grid(new F2Chart.AxisGridConfigBuilder().type("dash"))
.line(new F2Chart.AxisLineConfigBuilder()
.lineWidth(1).color("#E6E6E6").type("dash")));
mChart.setAxis("", new F2Chart.AxisConfigBuilder().hidden(true));
mChart.setScale("year", new F2Chart.ScaleConfigBuilder().range(new double[]{0.1, 0.9}));
mChart.render();