iOS

iOS Chartsライブラリを使い移動平均線を描画してみる。

投稿日:

はじめに

こんにちは、suzukiです。今回はChartsライブラリを使い移動平均線を描画します。
ローソク足+テクニカルチャートの描画を行うため、ライブラリを調査中にChartsライブラリに出会いました。
実装したい事は色々あるため調査も兼ねて少しずつ遊んでいきます。

Chartsライブラリについて

今回SwiftでChartsを利用してチャートを書きます。
利用する理由として、このライブラリのAndroid版であるMPAndroidChartが提供されているためです。
サンプルはiOSはGitHub上のdemoから、Androidであればストアからご確認ください。

ライブラリの導入

それでは実際にライブラリを導入しましょう。今回はCocoaPodsを利用しインストールしました。
pod 'Charts'
上記をPodfileに記述し、pod installを行います。

描画の準備

次にStoryBoardでチャートの描画範囲を決めましょう。

  • LineChartView CandleStickChartView CombinedChartViewを追加
  • 上下左右に制約を追加
  • 三つのChartViewの高さを等しく
  • それぞれのChartViewを関連付け

こちらでStoryBoardで行いたいことができました。

折れ線グラフを描画する

シンプルな折れ線グラフを描画しようと思います。
完成予定

LineChartViewの設定

LineChartViewに設定できる内容はたくさんあります。
今回は画像のようなシンプルな線グラフを表示するための項目を設定します。

LineChart用のデータ作成

グラフ用のデータはサンプルにランダムなチャート用の作成関数があったため利用します。

LineChartViewに描画

先ほどの二つの関数を使い折れ線を描画します。

折れ線グラフの描画が完了しました。
シンプルですが問題なく表示できました。

ローソク足を描画する

次にローソク足の描画を行います。
完成予定

CandleStickChartViewの設定

CandleStickChartViewでは下記のような設定を行います。
BarLineChartViewBaseというクラスをLineChartViewもCandleStickChartViewも継承しています。
そのため設定できる内容はほぼ同じになります。

CandleStickChartView用のデータ作成

サンプル用のデータを流用しています。

CandleStickChartViewに描画

先ほど同様にViewDidLoadにローソク足用のデータを追加しました。

Combined-Chartをローソク足と移動平均線を描画

それでは最後に複合グラフを描画します。
※Chartsのライブラリ3.2.1で複合チャートの描画でバグの修正がありました。
私の環境で2019/02/23に起きたので一応対応を記述して起きます。

  • XCodeを最新にする
  • pod ‘ChartsRealm’を使っている場合は消去
  • pod updateを行う

podでインストールされたChartsのバージョンが3.2.1のときは気をつけましょう。
as? CandleStickChartViewで検索してライブラリ内で複数ヒットしてたらバグの残っているフレームワークの可能性があります。
完成予定

CombinedChartViewの設定

下記の設定を行います。
BarLineChartViewBaseというクラスをCombinedChartViewも継承しています。

CombinedChartView用のデータ作成

移動平均線用の計算ロジックを組み込みます。
var endPoints: [Double] = []を宣言します。
宣言したendPointsにキャンドルデータの作成のロジック部分で終値を保存します。

移動平均線は5つのデータ分の終値の平均でデータをもとに折れ線グラフを描画作成します。

CombinedChartViewに描画

最後に下記のコードをViewDidLoadに記述しデータの値をセットします。

さいごに

今回はライブラリのバグでハマり、かなり苦戦してしまいました。
ライブラリは正しいという先入観を持たずに、事象を元に早く調べれればよかったと後悔しております。
次回はKotlinで同じようなことをしてみようと思っております。
最後までありがとうございました。

おすすめ書籍

詳解 Swift 第4版  リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)  よくわかるAuto Layout iOSレスポンシブデザインをマスター

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【Swift】iOS13.1、Xcode11でSceneDelegate周りを触ってみた。

1 はじめに2 SceneDelegateについて3 SceneDelegateの呼ばれる順番3.1 アプリ起動時3.2 アプリバックグラウンド3.3 アプリフォアグラウンド3.4 アプリフォアグラウ ...

Swift Chartsライブラリでボリンジャーバンドを描画してみる。

1 はじめに2 ボリンジャーバンドとは2.1 ライブラリの導入2.2 描画の準備3 ボリンジャーバンドを描画する3.1 CombinedChartViewの設定3.2 CombinedChartVie ...

swift

[Swift]CSVを読み込みRealmに保存してみる

1 はじめに1.1 前提条件2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回はDBにプリセットなどを用意する際にCSVを使ってRealmで保存して見たいと思います。 前提条件 ...

swift

[Swift]いろんなインジケータを提供してくれるNVActivityIndicatorView

1 はじめに2 準備3 実装3.1 ストーリーボードで表示を変更する3.2 コードで表示を変更する4 さいごに はじめに こんにちは、nukkyです。 今回はアプリに欠かせないインジケータをいろんなパ ...

swift

UITableViewでTableViewCell(Xib)を使ってみた

1 はじめに1.1 前提条件1.2 事前準備2 TableViewを準備3 Xibを準備4 tableviewに表示するcellにxibを指定する5 さいごに はじめに どうも、はじめです。 今回はX ...

フォロー

follow us in feedly

blog-page_side_responsive

東京改造計画(NewsPicks Book)
2019年2月
 12
3456789
10111213141516
17181920212223
2425262728 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。