ローズ チャートを使用して ECharts でデータの割合を表示する方法

ローズ チャートを使用して ECharts でデータの割合を表示する方法

要約: ローズ チャートは、データの割合を表示するために使用できる視覚的なデータ分析ツールです。この記事では、ECharts ライブラリを使用して Web ページにバラグラフを描画する方法を紹介し、具体的なコード例を示します。

はじめに: ローズ チャートは、データ分析や視覚化においてよく使用されるチャート タイプで、円の中心を原点とし、データの割合をさまざまな扇形の角度で表示するのが特徴です。ローズ チャートを使用すると、さまざまなカテゴリのデータの割合を視覚的に比較できます。 ECharts は、ローズ チャートを含む複数のチャート タイプをサポートする強力なデータ視覚化ライブラリです。

この記事は次の部分に分かれています:

1. ECharts ライブラリの紹介
2. データの準備
3. コンテナの作成
4. チャート オプションの設定
5. バラ チャートを描画する
6. ECharts ライブラリを導入する
   まず、ECharts ライブラリを Web ページに導入する必要があります。 CDN 経由で直接インポートすることも、ECharts のソース ファイルをダウンロードした後にインポートすることもできます。

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

2. データの準備
   ローズ チャートを描画する前に、表示するデータを準備する必要があります。たとえば、さまざまな地域での製品の売上を示す簡単なデータの例を次に示します。

var data = [
  {name: '地区1', value: 50},
  {name: '地区2', value: 30},
  {name: '地区3', value: 80},
  {name: '地区4', value: 60},
  {name: '地区5', value: 40}
];

このうち、name は地域名、value は地域の売上高を表します。

3. コンテナの作成
   Web ページで、チャートを保持するコンテナを作成する必要があります。 div 要素をコンテナとして使用し、幅と高さを設定できます。

<div id="chart" style="width: 800px; height: 600px;"></div>

4. グラフ オプションの設定
   グラフを描画する前に、タイトル、凡例、色などのグラフ オプションを設定する必要があります。以下はチャート オプションの例です:

var option = {
  title: {
    text: '产品销售占比',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['地区1', '地区2', '地区3', '地区4', '地区5']
  },
  color: ['#2378e1', '#60a1bc', '#87d9ef', '#de742f', '#7dbb94']
};

このうち、title はチャートのタイトルを表し、legend は凡例を表し、data は凡例の名前を表し、color はセクターの色を表します。 。

5. ローズ チャートの描画
   最後に、ECharts ライブラリの echarts.init メソッドを使用し、コンテナの ID を渡し、チャート インスタンスを作成し、setOption メソッドを使用して設定します。チャートのオプションとデータ。

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);

上記の手順により、Web ページ上にバラの図を描画できます。

概要: この記事では、ECharts ライブラリを使用して Web ページ上にバラグラフを描画する方法を紹介し、具体的なコード例を示します。ローズ チャートを通じてデータの割合を視覚的に表示し、データ分析と意思決定を支援します。この記事が読者のローズ図の理解と使用に役立つことを願っています。

以上がローズ チャートを使用して ECharts でデータの割合を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。