Quick BI では、組み込みのチャートオプション以外にもカスタムコンポーネントを開発できます。これらは、ご自身または組織内で使用できます。
開始する前に、ES2015 を理解しておく必要があります。公式ガイドでは、HTML、CSS、および JavaScript について中級レベルの知識があることを前提としています。フロントエンド開発の初心者の方は、Quick BI カスタムコンポーネントから始めるのは適切ではない場合があります。カスタムコンポーネントの開発方法には、オンライン編集プロフェッショナルモード と の 2 つの方法があります。以降のセクションでは、それぞれの方法について詳しく説明します。
モード 1. オンライン編集
Quick BI はオンライン編集モードをサポートしており、開発環境をインストールせずにページ上で直接カスタムコンポーネントを開発およびデバッグできます。このモードは複雑さが少なく、より便利です。開始するには、組織管理者 アカウントで Quick BI にログインします。
現在、組織管理者のみが [カスタム コンポーネント] 管理プラットフォームにアクセスするために必要な権限を持っています。
1. コンポーネントの登録
まず、カスタムコンポーネントを登録します。
Open Platform > Custom Components > Register Component に移動し、開発モード として オンライン編集 を選択して、必要な情報を入力し、確認 をクリックします。
説明必要に応じて、オンライン編集プロフェッショナルモード モードと を選択できます。
詳細については、「モード 1: オンライン編集」および「モード 2: プロフェッショナルモード」をご参照ください。
[コンポーネントの登録] ダイアログボックスで、次のパラメーターを設定します。
インターフェースパラメーターの説明
パラメーター
説明
コンポーネント名
コンポーネント名をカスタマイズできます。
アイコン
ローカルから画像をコンポーネントアイコンとしてアップロードできます。
説明画像の解像度は 60 ピクセル × 60 ピクセル以上、180 ピクセル × 60 ピクセル以下である必要があります。
アップロードする画像のサイズは 100 KB を超えることはできません。
コンポーネントタイプ
チャートタイプ、チャートカードメニュータイプ、ワークブックメニュータイプのコンポーネントの追加をサポートしています。
適用範囲
コンポーネントの適用範囲を追加します。ダッシュボード、データダッシュボード、ワークブックにチャートタイプのカスタムコンポーネントを追加できます。
開発モード
オンライン編集: ページ上で編集およびデバッグします。難易度が低く、利便性が高いです。
プロフェッショナルモード: SDK を使用してローカルでデバッグします。複雑なコンポーネント開発シナリオに適しています。
デバッグアドレス
カスタムコンポーネントのデバッグに使用するアドレスです。
説明プロフェッショナルモードの場合のみ、デバッグアドレスが必要です。
プラットフォーム
プラットフォームへのカスタムコンポーネントの追加をサポートしており、PC とモバイルの両方をサポートしています。
Shadowdom を有効にする
有効にすると、コンポーネント DOM は ShadowDOM モードになります。
デフォルトの幅と高さ
カスタムコンポーネントの幅と高さを設定します。
依存関係のあるサードパーティライブラリ
オプション。コンポーネントのパフォーマンスを向上させるために CDN アドレスを入力します。
備考
カスタムコンポーネントに備考を追加します。
[確認] をクリックします。
新しく登録されたコンポーネントがコンポーネント管理ページに表示されます。
デモコンポーネントを追加します。
「デモコンポーネントを追加」を直接クリックすることで、カスタムコンポーネントをすばやく作成できます。
このデモカスタムコンポーネントのプリセット構成は次のとおりです。
このカスタムコンポーネントは、オンライン編集によって開発され、echarts 上に構築された角丸リングチャートを備えています。デモコンポーネントを登録することで Quick BI に統合されており、表示効果は次のとおりです。
このデモカスタムコンポーネントを直接管理および使用したり、特定のニーズに合わせて変更したりできます。
2. コンポーネントのデバッグ
コンポーネントを登録した後、コンポーネントカードの デバッグ コンポーネント アイコンをクリックしてデバッグを開始します。
表示されるダイアログボックスで、デバッグ範囲、ワークスペース、およびデバッグするダッシュボードを選択し、[デバッグに移動] をクリックします。
ダッシュボード編集ページに移動し、そこでカスタムコンポーネントを開発できます。
デバッグ後のチャート効果は次のとおりです。
モード 2. プロフェッショナルモード
プロフェッショナルモードでは、ローカル環境でカスタムコンポーネントを開発およびデバッグします。このモードでは、最初にローカル環境をインストールおよび構成する必要があり、より複雑なコンポーネント開発に適しています。
1. 環境のインストール
開発を開始する前に、次のソフトウェアをインストールします。
node.js
node.js 公式 Web サイト にアクセスし、Node 環境 (node16 バージョン推奨) をダウンロードしてインストールします。次のコマンドでインストールを確認します。
node -vgit
Git 公式 Web サイト にアクセスし、git をダウンロードしてインストールします。次のコマンドでインストールを確認します。
git --versionyarn
Quick BI では、依存関係のインストールに yarn を使用することをお勧めします。次の手順に従って yarn をインストールします。
npm i -g yarn3.1 yarn ミラー
中国ではデフォルトの yarn ミラーが遅い場合があります。淘宝網ミラーを使用することをお勧めします。
yarn config set registry https://registry.npm.taobao.org/vscode
Quick BI では、IDE として Visual Studio Code を使用することをお勧めします。Quick BI シードプロジェクトは
TypeScriptを使用しており、最適な開発エクスペリエンスを得るには vscode をお勧めします。
2. 開発プロジェクトの作成
ターミナルまたは PowerShell を開き、目的のプロジェクトディレクトリに移動します。
次のコマンドを実行してプロジェクトを開始します。
npm init qbi-app test以下に示すように、テンプレートを選択するように求められます。
chartというプレフィックスが付いたテンプレートは、[カスタムチャート] テンプレート用です。menuというプレフィックスが付いたテンプレートは、[カスタムメニュー] テンプレート用です。
作成時に
-tパラメーターを使用してテンプレートを指定します。# 「カスタムチャート」テンプレートを作成する npm init qbi-app test -t chartプロジェクトディレクトリに移動し、依存関係をインストールします。
cd test yarnローカルサービスを起動します。
yarn run start起動に成功すると、次のメッセージが表示されます。
Google Chrome が自動的に開かない場合は、Chrome をインストールし、ブラウザを使用して手動で localhost:8001/ に移動します。
ポートの競合が発生した場合は、別のアプリケーションがポート 8001 を使用している可能性があります。
localhost:8001/ にサービスが表示されない場合は、コンピューターの hosts ファイルで localhost が 127.0.0.1 にマップされていることを確認してください。または、Chrome で 127.0.0.1:8001/ にアクセスしてコンポーネントをプレビューします。
初回アクセス時に
https証明書の問題が発生した場合は、FAQ を参照してください。
ローカルブラウザに 127.0.0.1:8001/ と入力します。
次のインターフェースは、ローカルサービスが正常に開始されたことを示します。
説明デバッグプロセス中は、ローカルサービスが実行されていることを確認してください。
3. Quick BI ダッシュボードでのコンポーネントのデバッグ
コンポーネントの登録
まず、カスタムコンポーネントを登録します。
[Open Platform] > [Custom Components] > [Register Component] に移動し、[development mode] として [professional mode] を選択し、必要な詳細を入力して、[Confirm] をクリックします。
説明依存関係のあるサードパーティライブラリはオプションです。コンポーネントにパフォーマンスの問題がない場合は、このフィールドを空白のままにします。
コンポーネントのデバッグ
コンポーネントカードの [デバッグ コンポーネント] アイコンをクリックします。
表示されるダイアログで、デバッグ範囲、ワークスペース、およびデバッグするダッシュボードページを選択し、[デバッグに移動] をクリックします。
表示されるダッシュボード編集ページで、[グラフの追加] > [カスタム] をクリックすると、作成したカスタムコンポーネントが表示されます。
これで、必要に応じてカスタムコンポーネントの開発とデバッグに進むことができます。