...
| 属性 | 説明 |
| default_colours | 管理で構成されたデフォルトグラフ色配列＞コンテンツ設定ページ。これらは、ページ内で指定された順序でもあります。 |
| orgrefcode_definitions | レポート内の任意のフィールドで使用されるすべての参照コード定義を含みます。 これは、マップのマップです。キーは、上記で定義されたメタデータオブジェクトのフィールドの参照コードと一致し、データオブジェクトで使用されるフィールドによりキーにされる参照コードです。 各定義には、設定されている場合、色と並び順が含まれ、参照コードの表示テキストも含まれます。 |
PDFへのレンダリング
JavaScript グラフをページに読み込むためには、通常グラフライブラリの読み込みも要求されます。これは、レポート周りに記述されているコードに応じて、レポートの残りの部分の後にグラフのレンダリングが行われる非同期的な読み込みが発生する可能性があります。
Yellowfinには、JavaScript グラフがいつ読み込まれたかを把握する方法がないため、PDFエクスポート中に問題が発生する可能性があります。
これに対処するために、オプションオブジェクトには、JavaScript グラフのレンダリングを待つ必要があることをYellowfinに警告し、レンダリングが完了するとYellowfinに通知する関数が含まれています。これを実現するには、blockRenderCompleteおよびrender Complete関数を合わせて使用します。
blockRenderComplete
この関数は、このグラフがPDFレンダラーに終了信号を送信する前に、実行する必要がある非同期コードがあるかもしれないので、待つ必要があることをレポートに伝えます。この関数は、JavaScript グラフ実装の一部として、最初に呼び出されるもののひとつです。
blockRenderCompleteが呼び出された場合、JS グラフコードの別の部分がrenderComplete関数を呼び出して、グラフのレンダリングが完了したことをレポートに伝える必要があります。
renderComplete
この関数は、このグラフがレンダリングを完了したことをレポートに伝え、それをリッスンしている任意のプロセス（例：PDFレンダラーなど）に対して、レポートのレンダリング完了信号をトリガーできるようにします。
JS グラフのどこかの時点でblockRenderCompleteが呼び出されていない場合、この関数はレポートのレンダリング状態にまったく影響しません。blockRenderCompleteが既に呼び出されている場合は、renderCompleteも必ず呼び出す必要があります。
例
$chartDrawDiv要素にいくつかのテキストを追加した例
| Code Block | ||||
|---|---|---|---|---|
| ||||
generateChart = function(options) {
options.blockRenderComplete(); //Prevents this report from being marked as renderComplete until "renderComplete" is also called;
var $chartDrawDiv = $(options.divSelector);
setTimeout(() => {
$chartDrawDiv.text('Hello World');
options.renderComplete();
}, 5000);
} |
5秒後に「Hello World」というテキストがページに追加され、これが完了するまでは、PDFエクスポーターでのエクスポートもできなくなります。
requireによるグラフライブラリを含む例
| Code Block | ||||
|---|---|---|---|---|
| ||||
generateChart = function(options) {
options.blockRenderComplete(); //Prevents this report being marked as renderComplete until the "options.renderComplete" function is also called
var $chartDrawDiv = $(options.divSelector);
var processedData = processData(options.dataset.data);
doDrawing(processedData, $chartDrawDiv, options.dataset.chart_information.height, options.dataset.chart_information.width, options.renderComplete); //Pass through the options.renderComplete function to doDrawing, so it can call the function when it finishes
},
processData = function(dataset) {
var barDs = {
labels : [],
datasets : [
{
label : 'Camp Region',
data : [],
backgroundColor : ['red','green','purple','yellow','black']
}
]
};
for (var i = 0; i < dataset.camp_region.length; i++) {
barDs.labels.push(dataset.camp_region[i].formatted_data);
barDs.datasets[0].data.push(dataset.camp_rating[i].raw_data);
barDs.datasets[0].backgroundColor.push('#009EEC');
}
return barDs;
},
doDrawing = function(data, $chartDiv, height, width, renderComplete) {
require(['js/chartingLibraries/chartjs/Chart.js'], function(chart) {
var $canvas = $('<canvas height="500" width="500"></canvas>');
$chartDiv.append($canvas);
new Chart($canvas, {
type: "polarArea",
data: data,
options : {
responsive : false
}
});
renderComplete(); //Once the chart drawing has completed, call renderComplete to notify the report this chart is finished
});
} |
操作の背景
JavaScript グラフを呼び出すと、まず始めに、以下を含むデータセットサーバを生成します。
...