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

Swift3 [XIBファイル] コードでの呼び出し方まとめ

1 はじめに1.1 前提条件2 TableViewCell2.1 XIBの準備2.2 ViewControllerでの呼び出し3 CollectionView3.1 XIBの準備3.2 ViewCon ...

【Swift】Xcode13XCTestの新機能、繰り返し実行で遊んでみた。

1 はじめに2 XCTestについて3 繰り返しのテストについて4 実際に使ってみる5 テストコードについて6 テストの設定7 さいごに8 おすすめ書籍 はじめに こんにちは、suzukiです。とうと ...

[Swift]ループできるページングビューをUIScrollViewで作ってみた

1 はじめに1.1 前提条件2 ページングビューとは3 実装3.1 Storyboardの準備3.2 コードの実装4 仕組み5 さいごに はじめに こんにちは、nukkyです。 スライドショーやウォー ...

swift

[Swift3] Segmentを使った画面切り替え (Extra View)

1 はじめに1.1 前提条件2 Segmentの用意3 表示したいViewを用意4 Extra Viewsに追加5 Segmentでの切り替え5.1 デフォルトで表示されるViewを設定5.2 Seg ...

【Swift】Tesseract-OCR-iOSを使って文字の読み取り

1 はじめに2 導入準備2.1 ライブラリのインポート2.2 言語モデルのインポート2.3 カメラを利用する準備3 レイアウト作成4 カメラ撮影5 データ解析5.1 UIImageのエクステンション5 ...

フォロー

blog-page_side_responsive

2019年2月
 12
3456789
10111213141516
17181920212223
2425262728  

アプリ情報

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