eCharts でパーセンテージ付きの横棒グラフを実装する方法

eCharts でパーセンテージ付きの横棒グラフを実装する方法

サンプルコード

var データ = [220, 182, 191, 234, 290, 120, 65, 444];
var バーの幅 = 20;
var 最大数 = 0;
(var i = 0; i < データ長さ; i++) {
    if (データ[i] > maxNum) {
        最大数 = データ[i];
    }
}
 
オプション = {
    背景色: '黒'、
    グリッド: {
        上: '10%'、
        左: '20%'、
        右: '10%'、
        下部: '0%'、
    },
 
    タイトル:
        テキスト: 'パーセンテージ列'、
    },
    x軸:
        表示: 偽、
    },
    y軸: {
        データ: data.map((item, index) => `data ${index}`),
        分割行: {
            表示: 偽、
        },
        軸ラベル: {
            テキストスタイル: { フォントサイズ: '80%', 色: '#02afff' },
        },
        軸線: {
            表示: 偽、
        },
        軸目盛り: false、
    },
    シリーズ: [
        {
            タイプ: 'バー'、
            バー幅: バー幅、
            zレベル: 2,
            データ: data.map(function (item) {
                戻る {
                    値: アイテム、
                    最大数: 最大数、
                };
            })、
            ラベル: {
                表示: true、
                位置: 'inside'、
                // 距離: 80,
                配置: '中央'、
                フォーマッタ: 関数 (パラメータ) {
                    // params.data.realValue を返します。
                    var パーセント = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
                    リターン率;
                },
                色: '#fff',
                フォントサイズ: 12,
            },
            アイテムスタイル: {
                境界半径: 10,
                色: 新しい echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { オフセット: 0、色: '#395CFE' },
                    { オフセット: 1、色: '#2EC7CF' },
                ])、
            },
        },
        {
            タイプ: 'バー'、
            バー幅: バー幅、
            バーギャップ: '-100%',
            データ: data.map(function (item) {
                戻る {
                    実数値: 項目、
                    値: maxNum、
                };
            })、
            ラベル: {
                表示: true、
                位置: '右'、
                距離: 80,
                配置: '右'、
                フォーマッタ: 関数 (パラメータ) {
                    params.data.realValue + 'item' を返します。
                },
                色: '#02afff',
                フォントサイズ: 18,
            },
            アイテムスタイル: {
                境界半径: 10,
                色: 'rgba(3,169,244, 0.5)',
            },
        },
    ]、
};

レンダリング

コード分​​析

1. オプションの前に、データ配列を定義し、for ループを使用して配列内の最大値を取得し、それを maxNum 変数として保存します。

2. シリーズに 2 つのバーを定義します。最初のバーのデータがマッピングされ、値は手順 1 のデータに設定されます。オブジェクト型が返されます。オブジェクトには、value と maxNum の 2 つの属性が含まれます (value は必須属性、maxNum はカスタム属性で、必要に応じて他のカスタム属性を追加できます)。maxNum 属性が追加されるのは、ラベルのフォーマッタが value/maxNum を使用してパーセンテージを計算する必要があるためです。シリーズでデータをオブジェクト型として返すという書き方は初めて目にしました。計算用のデータを取得するのにとても便利です。

3. シリーズの 2 番目のバーも、マップを通じてデータを割り当てます。違いは、このバーの値がすべて maxNum に設定されていることです。2 番目のバーは背景として機能し、100% の進行状況に相当します。 realValue 属性が必要な理由は、各項目の値 (220、182、191、234、290、120、65、444 など) をバーの右側に表示する必要があるためです。

4. 最初のバーは上にあり、2 番目のバーは下にあります。キーは、最初のバーの zlevel:2 と 2 番目のバーの barGap: '-100%' です。

echarts の公式ウェブサイトでより多くの事例を読むことは、私にとって本当に有益です。

要約する

これで、echarts でパーセンテージ付きの横棒グラフを実装する方法に関するこの記事は終了です。echarts パーセンテージ横棒グラフの関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Echarts バー水平棒グラフのサンプルコード
  • Echarts 基本入門: 棒グラフと折れ線グラフの一般的な構成

<<:  Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

>>:  検索テキストボックスがフォーカスを外れたときにテキストの位置がジャンプする問題の解決方法

推薦する

secure_file_priv nullの問題を解決する

secure_file_priv = ' ';管理者としてcmdを実行します。 my...

CSS 等高レイアウトの一般的な方法

等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

60件のページング事例と優れた実践例を推奨

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

HTML でのアンカータグの使用例の共有

アンカータグの使用法:同じドキュメント内の特定の場所にリンクすることをアンカー リンクと呼びます。ア...

MysqlクエリJSON結果に関連する関数の概要

JSON 形式のフィールドは、MySQL 5.7 で追加された新しい属性ですが、基本的には文字列とし...

Docker コンテナのネットワーク設定によく使われるコマンドの詳しい説明

基本的なネットワーク構成Docker はイメージに基づいて複数のコンテナを「開く」ことができ、各コン...

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...

CSSの4種類の配置の違いの詳細な説明

フロントエンド開発でよく使われるCSSの配置方法は、位置決めには、通常位置決め、相対位置決め、絶対位...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

CSS テキスト装飾 text-decoration と text-emphasis の詳細な説明

CSS では、テキストは私たちが毎日扱う最も一般的なものの 1 つです。テキストの場合、テキストの装...

tbodyタグの魔法はテーブルコンテンツの表示を高速化します

他の人のウェブページを保存して見たことがあると思いますが、特にdwで開くと、多くのウェブページに&l...

ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)

以下の機能が実装されています。 1. ユーザー名: onfouc は msg ルールを表示します。o...