概要
Chartsを使ってレーダーチャートを描画するときに、Y軸に表示される目盛りの個数が合わなくて一生悩んだので備忘録として残しておきます。
結論からいうと、Y軸ラベルの個数が固定の時は yAxis.setLabelCount(:force:)
を使いましょう。
やりたいこと
- 5種類のデータを表示したい
- 表示したいデータは全て 0 ~ 100 の範囲内
- 目盛りには0 ~ 100 までの値を20ずつ区切った値(0, 20, 40, 60, 80, 100)を出す
- データは後から更新されることがある
実装してみる
大部分を端折ってますが、設定周りはこんな感じに。
let chartView = RadarChartView()
// 共通設定
chartView.legend.enabled = false // 凡例無効化
chartView.highlightPerTapEnabled = false // タップ無効化
chartView.rotationEnabled = false // 回転無効化
chartView.innerWebColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1)
chartView.webColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1)
// Y軸設定
chartView.yAxis.axisMinimum = 0.0 // Y軸最小値
chartView.yAxis.axisMaximum = 100 // Y軸最大値
chartView.yAxis.labelCount = 6 // Y軸に出すラベルの数
// データ追加
let entries = [60, 80, 50, 70, 90].map { RadarChartDataEntry(value: Double($0)) }
let dataSet = RadarChartDataSet(entries: entries)
dataSet.lineWidth = 3
dataSet.setColor(.magenta)
chartView.data = RadarChartData(dataSet: dataSet)
恐ろしいことに、 yAxis.axisMaximum = 100
も yAxis.labelCount = 6
も無視されています。僕は泣きました。
yAxis.axisMaximumを変えてみる
なんか140まで表示されてしまってるので、axisMaximumをいい感じに下げてみれば直るんじゃね!?ということで、ちょっと下げてみる。
// Y軸設定
chartView.yAxis.axisMinimum = 0.0
chartView.yAxis.axisMaximum = 80
chartView.yAxis.labelCount = 6
どういうさじ加減かはわかりませんが、何故かうまいこと表示されました。(天才)
問題点
納得はできないけど表示されたからいいか〜と思ってましたが、これだと問題がありました。
以下の例のように、追加でデータを更新すると...
// 最初のデータ
let entries = [60, 80, 50, 70, 90].map { RadarChartDataEntry(value: Double($0)) }
let dataSet = RadarChartDataSet(entries: entries)
dataSet.valueFormatter = DataSetFormatter()
dataSet.lineWidth = 3
dataSet.setColor(.magenta)
chartView.data = RadarChartData(dataSet: dataSet)
// 更新後のデータ
let entries2 = [70, 80, 50, 60, 90].map { RadarChartDataEntry(value: Double($0)) }
let dataSet2 = RadarChartDataSet(entries: entries2)
dataSet2.valueFormatter = DataSetFormatter()
dataSet2.lineWidth = 3
dataSet2.setColor(.blue)
chartView.data = RadarChartData(dataSet: dataSet2)
正しい設定方法
色々試してみましたが、結論としては、chartView.yAxis.labelCount = 6
の記述が良くなかったようです。
ラベルの個数をセットするときに、もう一つメソッドが用意されていて、そちらを使うことで解決できました。
-> yAxis.setLabelCount(6, force: true)
そんなの分かんねーよって感じじゃないですか?プロパティにセットした時はforceじゃないんかい。僕はそう思いました。でもちゃんとライブラリ側のコードをはある程度把握しないとダメですね。
ということで、修正後のコードはこんな感じ。
let chartView = RadarChartView()
// 共通設定
chartView.legend.enabled = false // 凡例無効化
chartView.highlightPerTapEnabled = false // タップ無効化
chartView.rotationEnabled = false // 回転無効化
chartView.innerWebColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1)
chartView.webColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.1)
// Y軸設定
chartView.yAxis.axisMinimum = 0.0
chartView.yAxis.axisMaximum = 100
// ここ大事
chartView.yAxis.yAxis.setLabelCount(6, force: true)
// データ追加
let entries = [60, 80, 50, 70, 90].map { RadarChartDataEntry(value: Double($0)) }
let dataSet = RadarChartDataSet(entries: entries)
dataSet.lineWidth = 3
dataSet.setColor(.magenta)
chartView.data = RadarChartData(dataSet: dataSet)