ECharts 水球チャート: データの割合と目標の完了を表示する方法-jsチュートリアル-php.cn

ECharts 水球チャート: データの割合と目標の完了を表示する方法

WBOY

リリース： 2023-12-18 15:39:55

オリジナル

1362 人が閲覧しました

ECharts 水球チャート: データの割合と目標の完了を表示する方法

ECharts 水球グラフ: データの割合と目標達成度を表示する方法

はじめに:
データ視覚化の分野では、水球グラフは一般的に使用されます。グラフタイプを使用し、データの割合と目標の達成度を視覚的に表示できます。 ECharts は、開発者が選択できる豊富なグラフタイプを提供する強力なデータ視覚化ライブラリです。この記事では、ECharts を使用して水球グラフを作成し、データの割合と目標達成を表示する方法を詳しく紹介し、具体的なコード例を示します。

1. 水球図とは何ですか?
水球グラフは、ドーナツのサイズを使用してデータの割合を表し、ドーナツの内側にゴールの完了を表す実線の円を追加する特別なドーナツグラフです。水球グラフは通常、パーセンテージや進捗状況などのデータを表示するために使用され、データと目標とのギャップを視覚的に反映します。

2. ECharts を使用して水球チャートを作成する

ECharts ライブラリを導入する
まず、ECharts ライブラリをプロジェクトに導入します。ソースコードを直接ダウンロードするか、CDN を使用します。例:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
```
ログイン後にコピー
コンテナの作成
水球図を表示するコンテナを HTML で作成します。例:
```
<div id="waterball-chart" style="width: 400px; height: 400px;"></div>
```
ログイン後にコピー

Write JavaScript コード
ECharts を使用して、JavaScript コードを通じて水球チャートを作成し、関連パラメーターを構成します。以下はサンプルコードです。

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('waterball-chart'));

// 指定图表的配置项和数据
var option = {
 series: [{
     type: 'liquidFill',
     data: [0.6], // 数据占比，范围为[0,1]
     shape: 'circle',
     outline: {
         show: false
     },
     backgroundStyle: {
         color: '#FFA500'
     },
     label: {
         show: true,
         position: ['50%', '50%'],
         formatter: function(value) {
             return Math.round(value * 100) + '%'; // 格式化显示百分比
         },
         fontSize: 32,
         fontWeight: 'bold'
     },
     itemStyle: {
         color: '#FF4500'
     },
     emphasis: {
         itemStyle: {
             color: '#FF0000'
         }
     }
 }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

ログイン後にコピー

チャートのレンダリング
setOption メソッドを呼び出して構成アイテムを水球チャートに適用し、レンダリングします。例:
```
myChart.setOption(option);
```
ログイン後にコピー

3. コード分析
上記のコード例では、ECharts の liquidFill タイプを使用して水球チャートを作成しました。このうち、設定項目 series は、水球のチャートのスタイルやデータなどを設定するために使用されます。

data フィールドはデータの割合を示し、値の範囲は [0,1] です。この例では、データの割合は 0.6、つまり 60% です。
shape フィールドは水球図の形状を示し、circle (円) または rect (長方形) に設定できます。。
outline フィールドは、水球図のアウトラインを表示するかどうかを示します。ここでは表示されないように設定されています。
backgroundStyle フィールドは、水球図の背景スタイルを示します。この例では、色はオレンジ (#FFA500) です。
label フィールドは、show、position、 などのパラメーターを設定することによって、水球図に表示されるテキストラベルを表します。 formatter などラベルの表示位置と形式を制御します。
itemStyle フィールドは、水球図の塗りつぶしスタイルを表します。この例では、色はオレンジ - 赤 (#FF4500) です。
emphasis フィールドは、水球グラフのハイライトスタイルを示します。この例では、ハイライトの色は赤 (#FF0000) です。

これらの設定項目の値を変更することで、必要に応じて水球チャートを作成およびカスタマイズできます。

結論:
この記事では、ECharts を使用して水球グラフを作成する方法を詳しく紹介し、データの割合と目標の完了を示します。簡単なコード例を通じて、読者がすぐに ECharts を使用して水球図を描画し、実際のニーズに応じてカスタマイズできるようになることを願っています。 ECharts は、開発者がデータをより適切に表示して理解するのに役立つ、強力で使いやすいデータ視覚化ライブラリです。 ECharts を使用して水球グラフを作成し、データの視覚化をより鮮明で興味深いものにしてみてください。

参考リンク: