ApexChartsで3つの値を3つのRadialBarにマッピングする方法

まず、ApexChartsをプロジェクトに追加し、必要な依存関係をインストールします。

<!-- ApexChartsのCDNリンク -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/apexcharts.min.js"></script>

次に、3つの値を持つデータを用意します。例えば、次のようなデータを考えてみましょう。

const data = [80, 50, 70];

3つのRadialBarを表示するために、HTMLに要素を追加します。

<div id="chart"></div>

JavaScriptコードで、ApexChartsを初期化し、データをマッピングします。

const options = {
  series: data,
  chart: {
    type: 'radialBar',
    height: 350
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '70%'
      }
    }
  }
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

上記のコードでは、seriesプロパティにデータを設定し、chartオブジェクトのtypeを"radialBar"に設定しています。さらに、plotOptionsオブジェクト内のradialBarプロパティで、RadialBarの見た目をカスタマイズしています。

このコードを実行すると、3つのRadialBarが表示され、それぞれの値が対応するバーの長さとして表示されます。

この例では、基本的な3つの値を3つのRadialBarにマッピングする方法を示しました。さらに高度なカスタマイズやデータの操作が必要な場合は、ApexChartsの公式ドキュメントを参照することをおすすめします。

以上が、ApexChartsを使用して3つの値を3つのRadialBarにマッピングする方法の解説です。この方法を応用して、さまざまなデータの可視化に活用してみてください。