LoginSignup
1
3

More than 1 year has passed since last update.

Chartsでレーダーチャートを出す時にハマったこと

Last updated at Posted at 2022-01-29

概要

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 = 100yAxis.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)

何故か最大値が120になります。(狂)

正しい設定方法

色々試してみましたが、結論としては、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)

これなら後からデータが更新されても大丈夫 :thumbsup:

1
3
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
1
3