この機能は、BellaDati 2.9.4以降で使用できます。
特定のチャートまたは表を表示するために使用されるカスタムレンダラーを定義することができます。このレンダラーは拡張機能で定義されます。次に、ユーザーは、チャートの外観または表の外観の設定でレンダラーを選択するオプションがあります。
拡張構造
- 空のHTMLヘッドとHTMLボディ
- リソース
- chart-renderer.jsは、rendeCHARTTYPE_ext(canvasID, chartJSON, color)関数を実装しています
chart-renderer.jsのコンテンツ
特定のグラフのレンダリングを担当するJavascript。各チャートタイプには、独自のレンダリング機能が必要です。レンダリング機能:
チャートタイプ | 関数名 | JSON構造 |
---|---|---|
円グラフ | renderPIE_ext | Pie |
棒グラフ | renderBAR_ext | 棒チャート |
積み上げ棒グラフ | renderBAR_STACK_ext | 積み上げ棒チャート |
折れ線グラフ | renderLINE_ext | 折れ線チャート |
Scatter | renderSCATTER_ext | 散布チャート |
Horizontal scatter | renderHSCATTER_ext | 水平散布チャート |
Horizontal bar | renderHBAR_ext | 水平棒チャート |
Radar | renderRADAR_ext | Radar chart |
Horizontal stacked bar | renderHBAR_STACK_ext | 水平積み上げ棒チャート |
Histogram | renderHISTOGRAM_ext | ヒストグラムチャート |
Box plot | renderBOX_PLOT_ext | ボックスプロットチャート |
ヒートマップ | renderMEMBERS_ext | 水平ヒートマップチャート |
複合グラフ | renderCOMBINED_ext | 組み合わされたチャート |
Thermometer | renderTHERMOMETER_ext | 温度計チャート |
Funnel | renderFUNNEL_ext | ファンネルチャート |
Speedometer | renderSPEEDOMETER_ext | 速度計チャート |
Candle | renderCANDLE_ext | ロウソク足チャート |
Tree map | renderTREE_MAP_ext | ツリーマップチャート |
Bullet | renderBULLET_ext | ブレットチャート |
Horizontal bullet | renderHBULLET_ext | 水平ブレットチャート |
ガントチャート | renderGANTT_ext | ガントチャート |
XY | renderXY_ext | XY Scatter Plot Chart |
関数は、3つのパラメーターを受け取ります: canvas IDとchartJSONは、BellaDatiによって生成されたJSONグラフデータ(レポートAPIを参照)と、埋められたスペースの色を保持します。
スピードメーターチャートレンダリングの例:
function renderSPEEDOMETER_ext#EXT_ID#(canvasID, chartJSON, color) { //canvas initialization var canvas = document.getElementById(canvasID); var ctx = canvas.getContext("2d"); //dimensions var W = canvas.width; var H = canvas.height; //Variables var degrees = 0; var new_degrees = 0; var difference = 0; var bgcolor = "#d6d7d9"; //color of the space that is not filled var text; var animation_loop; var value = chartJSON.data.elements[0].values[0].value; var chartData = Math.round(value*3.6); draw(); function init() { //Clear the canvas everytime a chart is drawn ctx.clearRect(0, 0, W, H); //Background 360 degree arc ctx.beginPath(); ctx.strokeStyle = bgcolor; ctx.lineWidth = 25; ctx.arc(W/2, H/2, 100, 0, Math.PI*2, false); ctx.stroke(); //gauge will be a simple arc //Angle in radians = angle in degrees * PI / 180 var radians = degrees * Math.PI / 180; ctx.beginPath(); ctx.strokeStyle = "#ffdc74"; //color of the filled space ctx.lineWidth = 25; //The arc starts from the rightmost end. If we deduct 90 degrees from the angles //the arc will start from the topmost end ctx.arc(W/2, H/2, 100, 0 - 90*Math.PI/180, radians - 90*Math.PI/180, false); //you can see the arc now ctx.stroke(); //Lets add the text ctx.fillStyle = "#7c7c7c"; //color of the text ctx.font = "50px Open Sans"; text = Math.round(degrees/360*100) + "%"; //Lets center the text //deducting half of text width from position x text_width = ctx.measureText(text).width; //adding manual value to position y ctx.fillText(text, W/2 - text_width/2, H/2 + 15); } function draw() { //Cancel any movement animation if a new chart is requested if(typeof animation_loop != undefined) clearInterval(animation_loop); //get degrees that could be filled new_degrees = chartData; difference = new_degrees - degrees; //This will animate the gauge to new positions //The animation will take 1 second //time for each frame is 1sec / difference in degrees animation_loop = setInterval(animate_to, 1000/difference); } //function to make the chart move to new degrees function animate_to() { //clear animation loop if degrees reaches to new_degrees if(degrees == new_degrees || new_degrees === undefined) clearInterval(animation_loop); if(degrees < new_degrees) degrees++; init(); } }
拡張サンプル
Overview
Content Tools