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

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

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

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

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

1. ECharts ライブラリを導入する
   まず、ECharts ライブラリをプロジェクトに導入します。ソース コードを直接ダウンロードするか、CDN を使用します。例:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>

2. コンテナの作成
   水球図を表示するコンテナを HTML で作成します。例:

   <div id="waterball-chart" style="width: 400px; height: 400px;"></div>

3. 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);

4. チャートのレンダリング
   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 を使用して水球グラフを作成し、データの視覚化をより鮮明で興味深いものにしてみてください。

参考リンク:

• ECharts 公式ドキュメント: https://echarts.apache.org/zh/index.html
• ECharts 公式例: https:/ /echarts.apache.org/examples/zh/index.html

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