Reactで画像をグラフに導入

前提

以前作成した下記記事の環境からスタート

コマンド

下記コマンドでライブラリを入れる
yarn add chart.js react-chartjs-2

コード

import React from "react";
import { Chart, registerables } from "chart.js";
import { Bubble } from "react-chartjs-2";

Chart.register(...registerables);

const img = new Image();
img.src = "URL";
img.width = 100;
img.height = 100;

const img2 = new Image();
img2.src = "URL";
img2.width = 100;
img2.height = 100;

const data = {
  datasets: [
    {
      data: [
        {
          x: 10,
          y: 25,
          r: 1,
        },
      ],
      pointStyle: img,
    },
    {
      data: [
        {
          x: 20,
          y: 10,
          r: 1,
        },
      ],
      pointStyle: img2,
    },
  ],
};

const App = () => {
  return (
    <>
      <h1>マッピング</h1>
      <Bubble data={data} width={10} height={10} />;
    </>
  );
};
export default App;

確認

ターミナルでyarn start
ブラウザでhttp://localhost:8111にアクセス
グラフが表示されていたらOK！

最後に

グラフのドット部分を画像にするところが非常に時間がかかりました。
色んなライブラリをいじってみて、react-chartjs-2ならできそうだったので、作成しました。
まだ、コードが固定値、グラフも見栄えが良くないですが改良すれば良さげなものが完成しそうです！

参考文献