このトピックでは、Quick BI で ECharts を使用して、丸みを帯びたリングチャートのカスタムウィジェットを開発する方法について説明します。
チャート例
詳細なコードについては、「完全なコード例」をご参照ください。
ステップ 1: プロジェクトを作成する
カスタムウィジェットプロジェクトを作成し、依存関係をインストールして初期化します。
詳細については、「はじめに」をご参照ください。
npm init qbi-app myEcharts cd myEcharts yarn下の図に示すように、またはQuick BI 国際コンソールでウィジェットを登録します。
説明開発モードで [プロフェッショナルモード] を選択します。
オンライン編集チュートリアルについては、「チュートリアル: オンライン編集モードで ECharts コードをすばやく挿入する」をご参照ください。
ECharts をインストールします。
次のコマンドを実行して、ECharts タイプ定義をインストールします。
yarn add -D @types/echarts次のいずれかの方法で ECharts をインストールします。
サードパーティ CDN の導入: この方法により、読み込みパフォーマンスが向上します。
カスタムウィジェットのサードパーティライブラリの依存関係を含めるには、指定されたフィールドに
echartsCDN アドレスを入力します。詳細については、「参照ドキュメント」をご参照ください。
プロジェクトのルートディレクトリにある
webpack.config.jsを構成し、externals構成を追加します。// webpack.config.js externals: { lodash: '_', react: 'React', 'react-dom': 'ReactDOM', moment: 'moment', echarts: 'echarts', // 新しい項目を追加する },npm インストール:
npmまたはyarnを使用してインストールします。yarn add echarts
ウィジェット管理リストで、ターゲットウィジェットを見つけて、[デバッグ] アイコンをクリックします。
システムはデバッグのために対応するダッシュボードに自動的にリダイレクトします。詳細については、「ウィジェットのデバッグ」をご参照ください。
ステップ 2: meta を構成する
Meta 構成には、データパネルとスタイルパネルの設定が含まれます。
データパネルの構成
meta.ts の dataSchema をカスタマイズして、チャートがデータをどのように取得するかを定義します。多くの場合、テンプレートベースのプロジェクトで提供される meta を変更できます。一般的な変更点は次のとおりです。
areaName: フィールドの表示名
required: フィールドが必須かどうか
maxColumn: 含めることができるフィールドの最大数
1 つのディメンションと 3 つのメジャーを表示するには、対応する maxColumn を調整するだけです。次に例を示します。
// meta.ts
const componentMeta: Interfaces.ComponentMeta = {
propsSchema: {
dataSchema: {
areas: [
{
id: "drill",
name: "ドリル/ディメンション",
queryAxis: "drill",
rule: {
fieldTypes: ["dimension"],
required: false, // チャートの更新に必要なフィールドかどうか
/** 数を制限する */
maxColNum: 3,
},
},
{
id: "area_row",
name: "ディメンション",
queryAxis: "row",
rule: {
fieldTypes: ["dimension"],
maxColNum: 1, // 許可されるフィールドの最大数
required: true, // アイコンの更新に必要なフィールドかどうか
},
},
{
id: "area_column",
name: "メジャー",
queryAxis: "column",
rule: {
fieldTypes: ["dimension", "measure"],
maxColNum: 3, // 許可されるフィールドの最大数
required: true, // アイコンの更新に必要なフィールドかどうか
},
},
{
id: "filters",
name: "フィルター", // 名前
queryAxis: "filters",
rule: {
fieldTypes: ["dimension", "measure"],
required: false,
},
},
],
resultDisplay: {
/** 行数を制限する */
upLimit: 1000,
},
},
},
};
以下に示すように、データパネルを作成できます。
詳細な構成手順については、dataSchema を参照してください。詳細については、「参照ドキュメント」をご参照ください。
スタイルパネルの構成
styleSchema は、スタイルパネルの構成を定義します。これは、特定のシナリオに合わせてカスタマイズできます。この例のスタイルパネルの要件は次のとおりです。
凡例を表示するか非表示にするかを選択できます。
開始角度を数値で指定できます。
要件を分析すると、checkbox と number エディターを定義する必要があることが明らかになります。したがって、styleSchema 内で、type: 'switch' と type: 'number' を設定します。(現在サポートされているエディターのリストについては、「schema.type」をご参照ください。)
const componentMeta: Interfaces.ComponentMeta = {
propsSchema: {
styleSchema: {
schema: {
type: 'object',
className: 'tabs-uischema-container',
props: { mode: 'collapse' },
properties: {
// ここに必要なカスタムプロパティを入力します
display: {
type: 'object',
title: '表示設定',
properties: {
showLegend: {
type: 'switch',
id: 'showLegend',
defaultValue: true,
props: {
mode: 'checkbox',
label: '凡例を表示',
},
},
startAngle: {
title: '開始角度',
id: 'startAngle',
type: 'number',
defaultValue: 0,
props: {
placeholder: '開始角度を入力してください',
maxLength: 140,
},
},
},
},
},
},
},
},
};この段階では、スタイルパネルはこれらの 2 つのエディターを自動的に生成します。カスタムウィジェット内の customProps.viewConfig から、エディターに入力された値を取得できます。
ステップ 3: echarts チャートを開発する
チャートを開発するには、setOption(option) メソッドを呼び出す必要があります。以下は、Quick BI からのプロパティを echarts が受け入れることができるパラメーターに変換する方法のガイダンスです。
ECharts インスタンスを初期化します。
mountメソッドでは、echartsインスタンスを作成できます。// src/component.ts mount(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) { // ... this.chart = echarts.init(props.container as HTMLDivElement); this.setOption(props); }データを変換します。
マウントフェーズと更新フェーズで呼び出しを容易にするために、
setOptionメソッドをカプセル化します。customProps.dataは 2 次元配列です。customProps.data[i]はデータベーステーブルのデータの行を表し、各行には構成されたディメンションフィールドとメジャーフィールドに対応する値が含まれます。customProps.data[i][j]は、データベーステーブルのセルの値を表します。データ構造については、「カスタムウィジェット API」をご参照ください。fieldId は、ディメンションとメジャーのフィールド ID です。fieldId から配列インデックスへのマップを作成して、fieldId を介して値を簡単に取得できるようにします。
// src/component.ts setOption(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) { // チャートデータ const data = props.customProps.data; // データパネルの形式設定 const fieldSettingMap = props.customProps.viewConfig.fieldSettingMap; // データの最初の行 const [firstRow] = data; // 各データ行の位置は固定されています。配列インデックスと fieldId の間のマッピング関係を確立することにより、fieldId を介して値を取得するのが便利です。 const fieldColumnIndexMap: { [key: string]: number; } = firstRow.reduce( (prev, curr, i: number) => ({ ...prev, [curr.fieldId]: i, }), {}, ); }シリーズを構成します。
データパネルで設定されたディメンションフィールドとメジャーフィールドのシリーズ設定を取得するには、
customProps.dataConfigを使用します。// src/component.ts setOption(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) { // ... data // すべてのメジャーをフィルターで除外する const columnsFields = props.customProps.dataConfig.find(each => each.areaType === 'column')?.fields ?? []; // データパネルデータ形式設定 const fieldSettingMap = props.customProps.viewConfig.fieldSettingMap; // 形式を変換する const series = columnsFields.map((each, i) => { const filedSetting = fieldSettingMap[each.fieldId]; return { id: each.fieldId, type: 'bar', // fieldId と配列インデックスのマッピングに従って、各行のデータ値 data: data.map(row => row[fieldColumnIndexMap[each.fieldId]]?.value), coordinateSystem: 'polar', // エイリアスを設定する name: filedSetting?.aliasName ?? each.showName, }; }); // ... this.chart.setOption({ series, // ... }); }丸みを帯びたリングチャートは 1 つのディメンションしか受け入れないため、最初のディメンションを取得してカテゴリを設定します。
カテゴリを指定します。丸みを帯びたリングチャートは 1 つのディメンションしか受け入れないため、最初のディメンションを選択します。
// src/component.ts setOption(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) { // すべてのメジャーをフィルターで除外する const rowFields = props.customProps.dataConfig.find(each => each.areaType === 'row')?.fields ?? []; // メタは 1 つのディメンションのみを制限します const [onlyRow] = rowFields; const category = data.map(row => row[fieldColumnIndexMap[onlyRow?.fieldId]]?.value); // ... this.chart.setOption({ radiusAxis: { type: 'category', data: category, z: 10, }, // ... }); }スタイルパネルの設定を確認します。
スタイルパネルで設定されたフォームの値は、
customProps.viewConfigを使用して取得できます。たとえば、チェックボックスエディターのフォーム名は showLegend で、数値入力ボックスのフォーム名は startAngle です。どちらも表示カテゴリにあるため、customProps.viewConfig.display?.showLegendを介してアクセスできます。// src/component.ts setOption(props: Interfaces.LifecycleProps<Interfaces.ComponentProps>) { const showLegend = props.customProps.viewConfig.display?.showLegend; const startAngle = props.customProps.viewConfig.display?.startAngle; // echarts を設定する this.chart.setOption({ angleAxis: { startAngle, }, legend: { show: viewConfig.display?.showLegend, data: legend, top: 10, padding: 0, }, // ... }); }ドリルダウン、フィルターの相互作用、ジャンプなどの効果を作成します。
Quick BI は、ドリルダウン、フィルターの相互作用、ジャンプなどのアクションを実行できる
customProps.dispatchメソッドを提供します。dataIndex は、customProps.data内に表示されるディメンションの配列インデックスを指します。// component.ts const dispatch = props.customProps.dispatch; if (typeof dispatch === 'function') { // ドリルダウン/フィルターの相互作用/ジャンプイベント echarts.on('click', (serie: any) => { dispatch({ type: 'select', payload: { dataIndex: serie.dataIndex, // dataIndex は、クリックされた行の data 内の配列インデックスです }, }); }); // 空白のクリックイベント。モバイルドリルダウンに適応するために使用されます echarts.getZr().on('click', function (e) { if (!e.target) { dispatch({ type: 'cancelSelect', }); } }); }
これらの手順を完了すると、チャートが表示されます。必要に応じて、スタイルを変更し、データ形式を調整します。詳細については、「完全なコード例」のコメントをご参照ください。
ステップ 4: パッケージング
開発が完了したら、カスタムウィジェットをパッケージ化します。
npm run pack出力は build フォルダにあります。カスタムウィジェットプラットフォームからこれをアップロードして、ウィジェットを公開できます。
パッケージ化と公開の詳細については、「Quick BI でのウィジェットのパッケージ化と公開」をご参照ください。