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レスポンシブデザインをマスター

page_footer_300rect




page_footer_300rect




-iOS
-

執筆者:


comment

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

CAPTCHA


関連記事

[初心者向け]続・Xcodeの使い方(よく使うショートカットキーとエディタ)

1 はじめに1.1 前提条件2 ショートカットキー2.1 定義に移動(Jump to Definition)2.2 Quick Help2.3 Rename2.4 Edit All in Scope2 ...

swift

[Swift]動画広告を最後まで見たら何かするアレをAPPLOVINでやってみた

1 はじめに1.1 前提条件2 準備3 実装3.1 Xcodeの設定3.2 広告の再生4 テスト設定とかアプリ管理5 さいごに はじめに こんにちは、nukkyです。 今回はタイトルの通り、アプリでよ ...

swift

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

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

swift

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

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

swift

[Swift]iPadのActionSheet表示でクラッシュする問題

1 はじめに2 エラー内容2.1 エラー原因2.2 まだこれで解決ではない3 さいごに はじめに こんにちは、nukkyです。 私は普段iPhoneアプリの開発を主に行っているのですが 慣れか油断かi ...

フォロー

follow us in feedly

page_side_300rect

2019年2月
« 1月 3月 »
 12
3456789
10111213141516
17181920212223
2425262728 

アプリ情報

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