上一篇文章 10行代码绘制线柱图我们使用 F2Native 画出了基本的图表，但真实业务中往往还需要一些配置来满足样式上的需求，这篇文章我们会在图表上增加一些常用的配置，让图表更实用。

PS:以下的设置代码都需要放在self.chart.render(）之前

格式化Y轴

我们经常会在Y轴上增加单位，帮助用户理解Y轴的数据。这里我们增加一个 $ 的单位。通过设置在 axis 轴上 label 的回调方法，可以拿到每一个Y轴上的数据，在拼接上 $ 即可。

let itemBlock = {(param: Dictionary<AnyHashable, Any>) -> Dictionary<AnyHashable, Any> in
    //content为轴上的数据对应的key
    let content = param["content"] as! String
    return ["content":  content + "$"]
} as ItemCallback
let itemCallback = F2Callback.init(itemBlock);
//item为一个callback，当渲染轴上数据的时候，会回调这个callback
self.chart!.axis()("sold", ["label":["item": itemCallback]]);

定制网格线

关闭X轴的网格线，设置 genre 对应的 grid 为false

self.chart?.axis()("genre", ["grid": false])

定制Y轴的网格线为虚线，看起来更舒服一点，设置 sold 对应的 grid 的 type 为 dash，并设置 dash 的间隔即可。

self.chart!.axis()("sold", ["label":["item": callback], "grid":["type": "dash", "dash":[4, 4]]]);

定制柱子的样式

我们可以给柱子设置不同的颜色以增加区分度。在 interval 对象上调用 color 方法即可。第一个参数 genre 为分配颜色的映射，第二个是数组[]，为空则由引擎自动分配颜色，也可自己设置颜色，如 ["#f00", "ff0", ...]

self.chart!.interval()().position()("genre*sold").color()("genre", [])

设置柱子圆角样式, 调用 interval 上的 style 方法，设置 rounding 属性即可，传入一个数组，分别代表左上右上右下左下，我们只要设置左上和右上即可。

self.chart!.interval()().position()("genre*sold").color()("genre", []).style()(["rounding": [10, 10, 0, 0]])

增加手势

我们希望长按的时候显示 Tip , 可帮助用户更精确的查看数据。设置 chart 的 tooltip 属性，传入一个空的字典，当然 tooltip 中也有很多的设置，我们这里简单使用，设置为空即可。

self.chart?.tooltip()([:]);

写在最后

我这里贴以下完整的代码，如下；

 override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "LineChart";
        self.view.backgroundColor = UIColor.black;
        
        //init a canvas view to show chart
        //初始化一个view来承载图表的显示
        self.canvasView = F2CanvasView.canvas(CGRect(x:0, y: 100, width: self.view.frame.width, height: 200))
        self.view.addSubview(self.canvasView!)
        
        //prepare a chart for drawing
        //创建一个chart对象准备绘制图表
        self.chart = F2Chart.init(self.canvasView!.bounds.size, name: "LineChart-Swift")
        
        //connect chart and canvasview
        //把chart和canvasView关联起来，因为chart渲染好后需要显示在view上面
        self.chart!.canvas()(self.canvasView!)
        self.chart!.padding()(20, 20, 20, 20)
        
        //setup the source data of chart
        //设置chart的数据源
        let jsonPath = Bundle.main.path(forResource: "data", ofType: "json")
        guard let jsonString = try? String.init(contentsOfFile: jsonPath!) else {
            return
        }
        let jsonData = F2Utils.toJsonArray(jsonString)
        self.chart!.source()(jsonData)
        
        //draw a line in chart
        //The mapping of the x-axis data is the genre field, and the mapping of the y-axis data is the sold field
        //在chart上画一条线，x轴数据的映射是genre字段，y轴数据的映射是sold字段
        self.chart!.interval()().position()("genre*sold").color()("genre", []).style()(["radius": [10, 10, 0, 0]])
        
        //shut down the legend
        //关闭图例
        self.chart!.legend()("genre", ["enable": false])
        
        let block = {(param: Dictionary<AnyHashable, Any>) -> Dictionary<AnyHashable, Any> in
            //get the content of axis
            //轴上的数字的key是content
            let content = param["content"] as! String
            return ["content":  content + "元"]
        } as ItemCallback
        let callback = F2Callback.init(block);
        
        //set label's call back of axis
        //设置axis轴上文字的call back
        self.chart!.axis()("sold", ["label":["item": callback], "grid":["type": "dash", "dash":[4, 4]]]);
        
        //shut down the grid of x-axis
        //关闭x轴的网格线
        self.chart?.axis()("genre", ["grid": false])
        
        //start tooltip of chart
        //打开长按十字线
        self.chart?.tooltip()([:]);
        
        //draw chart and show on canvas view
        //渲染并显示在view上
        self.chart!.render()();
    }

柱图十字线 (1).gif

F2Native 中针对上面的配置还有很多其它字段，我这里也不可能完全列举完，更多的属性字段可以看文档和源码。最后以上代码已经提交到 GitHub, 欢迎下载。

10行代码绘制线柱图 -进阶 | iOS Swift

格式化Y轴

定制网格线

定制柱子的样式

增加手势

写在最后