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]半モーダルを簡単に実装できるFloatingPanelを使ってみよう!

1 はじめに2 半モーダルって?3 準備4 実装4.1 表示位置の変更4.2 スクロール領域の設定4.3 レイアウトの変更5 さいごに6 おすすめ書籍 はじめに 今回はiOSエンジニアなら1回はみたこ ...

【Swift】SwiftUIの理解のためDSL記法とFunctionBuilderを調べてみた

1 はじめに2 DSL(ドメイン固有言語)について3 関数ビルダ3.1 定義方法3.2 使用方法3.3 SwiftUIの関数ビルダ4 カスタム属性5 さいごに6 おすすめ書籍 はじめに Xcode11 ...

swift

[Swift]PDFKitでPDFの表示

1 はじめに1.1 前提条件2 PDKitの概要3 実装3.1 PDFの表示4 さいごに はじめに こんにちは、nukkyです。 以前、PDFKitを使わないでPDFを表示する方法を書きましたが、今回 ...

[Swift]プロトコルの拡張で既定値を設定する。

1 はじめに2 プロトコルの拡張について2.1 プロトコルに既定値を設定2.2 プロトコルを設定したクラスの作成2.3 制約をつけてプロトコルに既定値を設定3 さいごに4 おすすめ書籍 はじめに こん ...

swift

[Swift]UITableViewのカスタムセルをStoryboadで

1 はじめに1.1 前提条件2 実装2.1 Storyboadの準備2.2 UITableViewCellクラスの準備2.3 カスタムセルの表示3 さいごに はじめに こんにちは、nukkyです。 以 ...

フォロー

blog-page_side_responsive

2019年2月
 12
3456789
10111213141516
17181920212223
2425262728  

アプリ情報

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