Posted at

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

More than 1 year has passed since last update.


はじめに

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