Zenn
🎃

SvelteでChart.jsやってみる - Polar Area編 -

2023/03/27に公開
Node.js
Svelte
Chart.js
tech

できました

polar area

REPLのファイル、要素は最低限にしぼってあるつもりですので、ご参考いただければ幸いです。

環境

$ node -v
v18.15.0

手順

SvelteのプロジェクトにChart.jsを組み込むため、svelte-chartjsを導入します。
このモジュールを使うと、素でChart.jsを呼び出す必要なく、コンポーネントの様式でSvelteっぽくグラフを組み込むことができます。

インストール

公式のInstallに沿ってプロジェクトにインストールします。

Install this library with peer dependencies:

pnpm add svelte-chartjs chart.js
# or
yarn add svelte-chartjs chart.js
# or
npm i svelte-chartjs chart.js

私の環境ではyarn add...で行いました。同時にchart.jsもインストールしているのがキモです。

各ファイルの説明

各ファイルの内容をざっくり説明します。

data.js

PolarAreaに読み込ませるデータをjson形式で組み立てています。

export const data_backend = {
  datasets: [
    {
      data: [7, 8, 8, 6, 4],
      backgroundColor: colors,
      label: 'backend dataset.', // for legend
    },
  ],
  labels: ['Go', 'Python', 'C#', 'TypeScript', 'PHP(Laravel)'],
};

datasetsの中身がグラフに渡すデータになります。今回は5つの系列を描画しました。
datasets中のdata配列が、それぞれの系列の値になります。
またdatasetsと同レベルのlabels要素に渡す文字列配列が、それぞれ対応する値のラベルになります。

領域の色は今回ちょっと手を加えて、カスタムしてみました。backgroundColorに渡しているcolors値は下記のように定義しています。

const colors = [
  '#d68fb8',
  '#c86aa1',
  '#ba4589',
  '#95376e',
  '#702952',
  '#4a1c37',
]

当方、色のセンスに自信がないので、カラーピックにはフリーのジェネレーターを使わせていただきました。

PolarArea.svelte

PolarAreaの描画を実際に行うコンポーネントです。

<script lang="ts">
    // ここから
    import { PolarArea } from "svelte-chartjs";
    import {
        Chart as ChartJS,
        Title,
        Tooltip,
        Legend,
        ArcElement,
        RadialLinearScale,
    } from "chart.js";
        
    ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);
    // ここまでほぼお作法
    
    export let data;    // 描画するデータと、
    export let title;   // グラフタイトルを外部から受け取る
</script>

冒頭のscriptタグ部分はほぼお作法と、グラフの内容に関わる変数のexportです。
ChartJS.registerの部分は不要な要素は省けそうですが、PolarAreaの場合はこの組み合わせが最小限っぽいです。

後半は、importしたPolarAreaコンポーネントにdataやtitleを渡したり、
見た目の調整についてのオプションを組み立てている部分になります。詳細は割愛します。

App.svelte

<script>
  import SkillsMap from "./PolarArea.svelte";
  import { data_backend } from "./data";
</script>

<div id="skillmaps-container">
  <h2>My Skills</h2>
  <h4>by Polar Area Chart</h4>
  <div>
    <SkillsMap data={data_backend} title={"Backend/Serverside"} />
  </div>
</div>

<style>
  #skillmaps-container {
    width: 70vw
  }
</style>

上で組み立てたデータとコンポーネントをimportして配置します。
dataはjsファイルから、titleはリテラルで渡しています。

ここまでの作業で、冒頭のようなグラフを描画するコンポーネントができました。

まとめ

要所要所でグラフなどの可視化ツールを使うと表現の幅が広がっていいですね！

ではまた！

参考記事

Discussion