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

Swift ChartsライブラリとCryptowatchAPIでローソク足を描画してみる。

1 はじめに2 CryptoWatchについて2.1 OHLC3 リクエスト方法3.1 CryptoWatchのAPI3.2 Swiftでの実装方法4 さいごに5 おすすめ書籍 はじめに こんにちは鈴 ...

swift

[Swift]動画撮影にて好きなサイズでプレビュー表示する

1 はじめに1.1 前提条件2 実装3 さいごに はじめに こんにちは、nukkyです。 今回はメインのビューの右上とかに小窓の様なプレビューにカメラの映像を出して、動画撮影するという機能を作成したの ...

[Swift]AlertControllerでメモリリークが起きた!便利なMemory Graph

1 はじめに2 今回の問題2.1 deinitの調査2.2 原因の調査3 解決策4 Memory Graphについて5 さいごに6 おすすめ書籍 はじめに こんにちは、suzukiです。この記事の結論 ...

swift

Swiftでシェア機能や外部アプリ起動の導線を簡単に実装できるライブラリ「SwiftShareBubbles」

1 はじめに2 準備3 実装3.1 表示3.2 用意されているパターン4 さいごに はじめに こんにちは、nukkyです。 今回はSNSでのシェア機能や外部アプリ起動の導線を追加したいときに 簡単に実 ...

swift

Swift3でRealmを使ってみる

1 はじめに1.1 前提条件2 事前準備2.1 Realmのインストール・設定2.1.1 Carthageファイルの生成2.1.2 CarhageにてRealmをインストール2.1.3 Realmをイ ...

フォロー

follow us in feedly

blog-page_side_responsive

2019年2月
 12
3456789
10111213141516
17181920212223
2425262728 

アプリ情報

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