Odin Chartとは?

Odin Chartは、Tyler Wolf氏によって提供されているAdobe XD用のチャート作成プラグインです。 Odin Chartの公式サイトはこちら。 https://odinchart.com/

プラグインのインストール

Odin Chartを使うにはユーザー登録をする必要がありますので、まずは下記URLにアクセスしてユーザー登録を行います。 https://app.odinchart.com/signup メールアドレス、パスワード、確認用パスワードを入力し、利用規約「I have read …」にチェックを入れて「Sign UP」クリックです。 ODIN Chartにユーザー登録 ユーザー登録が完了するとActivation Keyが発行されますので、表示したままにしておきます。 ODIN ChartのActivation Key 続いてはブラウザで下記ページにアクセスします。 https://xd.adobelanding.com/en/xd-plugin-download/?pluginId=88864a42 アクセスすると「Adobe XDを開きますか?」と画面案内が表示されますので、「Adobe XDを開く」を選択して開きます。 Adobe XDのプラグイン画面が表示されますので、「インストール」をクリックしてインストールします。 Adobe XD用プラグインOdin Chartのインストール インストールが終わったらプラグイン画面から開きます。 Adobe XD用プラグインOdin Chartを開く Activation Key入力を求められますので、登録したメールアドレスと先程のActivation Keyを入力して、「Active」をクリックします。これで一通りの準備は終わりです。 Odin ChartのActivation Key入力

Odin Chartの使い方

チャートの挿入

初期設定ではプラグイン画面で、「Create Chart」をクリックすれば折れ線グラフが簡単に作成できるようになっています。

  1. Select chart type
    チャートタイプを選択
  2. Select color scheme
    カラースキームを選択
  3. Create Chart
    「Create Chart」クリックでチャートを作成

Odin Chartの使い方 こんな感じで簡単にチャートが挿入できます。 Adobe XDに挿入されたOdin Chartのチャート もちろん、チャートの先は色の変更や太さ、点線などを編集でき、ポイントを選択&ドラッグでチャートを変更することも可能です。 XDに挿入されたチャートの編集

チャートの種類

サンプルのチャートです。折れ線チャート、バーチャート、円チャート、テーブルチャート、散布図が挿入できます。 Odin Chartのサンプルチャート 世界地図も挿入できます。 Adobe XDに世界地図を挿入

データの挿入

CSVデータをインポートしてチャートを表示することもできます。下記サンプルのようにデータは行ごとに改行したシンプルなデータをインポートできます。

156 160 170 148 182 136 172

インポート自体は、「Select data source」の「Change」をクリックしてCSVファイルを読み込み、「Create Chart」で作成ができます。 Adobe XDのOdin ChartにCSVデータをインポート 実際に読み込んでみたサンプルです。 Adobe XDのOdin Chartでチャートデータを読み込み

あわせて読みたい記事