Textwellでチャートを描く

takahashihideki
3 min readMar 21, 2015

ChartNew.js という Javascript ライブラリを使って、Textwell に入力したデータをチャート化するアクションをつくりました。

作成したチャートは画像として保存することができます。

Textwell にたとえば次のようにテキストを入力して、

国語 算数 理科 社会
78 80 75 40

入力したテキストを選択して起動すると …

このような円グラフや、

折れ線グラフ、

レーダーチャートなどをアクション画面に描画します。

iPhone の場合、描画されたチャートを長押しすると、画像として保存することができます。Mac の場合はドラッグや副ボタンクリックで保存することができます。

アクション画面のヘッダメニューで、9種類のチャートに切り替えることができます。

  1. Line (折れ線グラフ)
  2. Bar(棒グラフ)
  3. HorizontalBar (横棒グラフ)
  4. StackedBar(帯グラフ)
  5. HorizontalStackedBar(横帯グラフ)
  6. Radar(レーダーチャート)
  7. Pie(円グラフ)
  8. Doughnut(ドーナツグラフ)
  9. PolarArea(極座標グラフ)

また、次のように複数のデータ行を入力して

国語 算数 理科 社会
太郎 76 56 65 43
花子 23 45 65 76

このように、複数のデータ行を重ね合わせたチャートを描画することもできます。

ただし、円、ドーナツ、極座標グラフでは複数のデータ列を重ねることはできません(複数のデータ行に対して選択された場合は、1行目のデータをグラフ化します)。

アクションを Textwell にインポート

ソースコードはこちらに公開されています

--

--