20
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

#完成図
グラフ整数.png

#元の図
グラフ少数.png

#開発環境

  • 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] 軸に関する設定

20
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?