#はじめに
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()
#全体のソースコード
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] 軸に関する設定