ios-chartsのグラフ表示にて、小数点を消す方法

はじめに

ios-chartsのグラフ表示にて、小数点が表示され見栄えが良くないなと思っていた。
ネットで小数点を消す方法を調べていたが、全くと言っていいほど載っていなかった。。。
絶対小数点を消す方法があるだろうなーって思いOSSの中身を眺めていたら、小数点を消すことができる方法を見つけたので共有。

完成図

元の図

開発環境

• Xcode9
• Swift4
• iOS 10.0
• Charts(OSS) version 3.0.4

小数点を消す方法

BarChartDataSetクラスの変数(valueFormatter)を設定することで、小数点を消すことができる。

正確には、ChartBaseDataSetクラスにvalueFormatterがある。
BarChartDataSet
　　　↓ 継承
BarLineScatterCandleBubbleChartDataSet
　　　↓ 継承
ChartDataSet
　　　↓ 継承
ChartBaseDataSet (このクラスのvalueFormatterを設定する)

下記にvalueFormatterの設定の仕方を示す。

public class BarChartValueFormatter: NSObject, IValueFormatter{
    public func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String{
        return String(Int(entry.y))
    }
}

let chartDataSet = BarChartDataSet(values: dataEntries, label: "Units Sold")
chartDataSet.valueFormatter = BarChartValueFormatter()

全体のソースコード

ViewController.swift

import UIKit
import Charts

class ViewController: UIViewController {

    //storyboardと繋いである
    @IBOutlet weak var barChartView: BarChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // y軸のプロットデータ
        let unitsSold = [8.0, 4.0, 6.0, 3.0, 9.0, 10.0, 4.0, 10.0, 8.0, 4.0, 5.0, 9.0]

        setChart(y: unitsSold)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func setChart(y: [Double]) {
        // プロットデータ(y軸)を保持する配列
        var dataEntries = [BarChartDataEntry]()

        //グラフのバーのxとyを決めてる
        for i in 0 ..< y.count {
            let dataEntry = BarChartDataEntry(x: Double(i), y: y[i])
            dataEntries.append(dataEntry)
        }

        //グラフに表示させたいデータを作成
        let chartDataSet = BarChartDataSet(values: dataEntries, label: "Units Sold")
        chartDataSet.valueFormatter = BarChartValueFormatter()
        //バーのラベル表示
        chartDataSet.drawValuesEnabled = true
        //バーの色(オレンジに設定)
        chartDataSet.colors = [UIColor(red: 1, green: 150/255, blue: 0, alpha: 1)]
        //データをグラフにセット
        barChartView.data = BarChartData(dataSet: chartDataSet)

        //グラフの背景色(グレーに設定)
        barChartView.backgroundColor = UIColor(red: 189/255, green: 195/255, blue: 199/255, alpha: 1)
        //グラフのバーにアニメーションをつける
        barChartView.animate(yAxisDuration: 2.0)

        // X軸のラベルを設定
        barChartView.xAxis.valueFormatter = BarChartFormatter()
        // x軸のラベルをボトムに表示
        barChartView.xAxis.labelPosition = .bottom
        // x軸のラベル数を設定(設定しない場合のラベル数は6)
        barChartView.xAxis.labelCount = 12
        // x軸の縦線を表示しない
        barChartView.xAxis.drawGridLinesEnabled = false

        // グラフのタイトル
        barChartView.chartDescription?.text = "Cool Graph!"
        // 横に赤いボーダーラインを描く
        let ll = ChartLimitLine(limit: 8.0, label: "目標")
        barChartView.rightAxis.addLimitLine(ll)

        //周りの枠組みが色濃くなる
        barChartView.drawBordersEnabled = false
        //falseの時、背景がグレーになる
        barChartView.drawGridBackgroundEnabled = true
        //タップ時のハイライトを消す処理
        barChartView.highlightPerTapEnabled = false
        barChartView.highlightPerDragEnabled = false

        //右ラベルを非表示
//        barChartView.rightAxis.drawLabelsEnabled = false

        //yの最低値を0に設定
        barChartView.rightAxis.axisMinimum = 0.0
        barChartView.leftAxis.axisMinimum = 0.0

        //y軸のラベルを整数値にする処理。
        barChartView.rightAxis.granularityEnabled = true
        barChartView.leftAxis.granularityEnabled = true
        barChartView.rightAxis.granularity = 1.0
        barChartView.leftAxis.granularity = 1.0

        //ピンチでズームが可能か
        barChartView.pinchZoomEnabled = false
        //ダブルタップでズームが可能か
        barChartView.doubleTapToZoomEnabled = false
        //ドラッグ可能か
        barChartView.dragEnabled = false
        //バーの背景をグレーにする処理
        barChartView.drawBarShadowEnabled = false
        //xy軸スケール拡大縮小をできなくする
        barChartView.scaleXEnabled = false
        barChartView.scaleYEnabled = false

        // グラフの余白
        barChartView.setExtraOffsets(left: 0, top: 64, right: 0, bottom: 0)
    }
}

//小数点表示を整数表示にする処理。バーの上部に表示される数字。
public class BarChartValueFormatter: NSObject, IValueFormatter{
    public func stringForValue(_ value: Double, entry: ChartDataEntry, dataSetIndex: Int, viewPortHandler: ViewPortHandler?) -> String{
        return String(Int(entry.y))
    }
}

//x軸のラベルを設定する処理。
public class BarChartFormatter: NSObject, IAxisValueFormatter{
    var months: [String]! = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
    public func stringForValue(_ value: Double, axis: AxisBase?) -> String {
        return months[Int(value)]
    }
}

疑問点

y軸のラベルを整数値表示するために下記の処理を書いたが、なぜ整数値表示されるのかが分からなかった。

//y軸のラベルを整数値にする処理。
barChartView.rightAxis.granularityEnabled = true
barChartView.leftAxis.granularityEnabled = true
barChartView.rightAxis.granularity = 1.0
barChartView.leftAxis.granularity = 1.0

分かる方いましたら教えてくださると有難いです。
また、他の方法があったら教えて欲しいです。

参考URL

ios-charts y軸の浮動小数点表示を整数表示にするには
ios-charts チャート表示ライブラリ Xcode8 + Swift3
[Swift] [iOS] チャート表示ライブラリ [ios-charts]
[Swift] [iOS] チャート表示ライブラリ [ios-charts] 詳細な使い方
[Swift] [iOS] チャート表示ライブラリ [ios-charts] 軸に関する設定