作成日: 2024/10/01 最終更新日: 2025/02/19
文書種別
不具合
状況
修正済み
詳細
htmlTextオプションおよびLegendのscrollbarプロパティをtrueに設定します。
この時、凡例の数が多くなるとスクロールバーは表示されますが、凡例のラベルテキストが表示されません。
この時、凡例の数が多くなるとスクロールバーは表示されますが、凡例のラベルテキストが表示されません。
回避方法
この問題はバージョン5.20242.30で修正されました。
修正版を適用しない場合の回避方法は次の通りです。
凡例からスクロールバー機能を削除したうえで、renderedイベントでスクロールバーを手動で描画します。
import * as chart from '@mescius/wijmo.chart';
// 回避方法
// 凡例からスクロールバー機能を削除します。
chart.Legend.prototype['_addScrollbar'] = function () {
return null;
};
・・・・
options: {
htmlText: true,
},
// 回避方法
// renderedイベントでスクロールバーを手動で描画します。
rendered: (s: chart.FlexChart, e: any) => {
// 必要な要素を選択する
let legendMainRect = document.querySelector('.wj-legend') as HTMLElement;
let legendBox = document.querySelector('.wj-legend rect') as HTMLElement;
let adjacentEle = document.querySelector('.wj-plot-area') as HTMLElement;
let chartAreaSvg = document.querySelector('.wj-flexchart svg') as HTMLElement;
// 寸法を取得する
let chartArea = legendMainRect.getBoundingClientRect() as DOMRect,
legendWidth = legendBox.getAttribute('width') as string,
legendHeight = legendBox.getAttribute('height') as string,
legendX = legendBox.getAttribute('x') as string,
legendY = legendBox.getAttribute('y') as string;
//スクロールバーが必要かどうか
if (parseFloat(legendHeight) < chartAreaSvg.getBoundingClientRect().height - 5) { //5は余分なマージン
return;
}
// より良いレンダリングを可能にするために「clip-path」を削除する
legendMainRect.removeAttribute('clip-path');
// Create foreignObject with dimensions from legendBox
let fObj = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject') as any;
setAttrib(fObj, {
width: legendWidth,
height: legendHeight,
x: legendX,
y: legendY
});
// legendBox からの寸法を使用して、foreignObjectを作成する
let div = document.createElement('div');
div.style.height = '100%';
div.style.overflow = 'hidden scroll';
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', legendWidth);
svg.setAttribute('height', chartArea.height.toFixed(0));
div.appendChild(svg);
fObj.appendChild(div);
svg.appendChild(legendMainRect);
// プロットエリアの前にforeignObjectを挿入します
adjacentEle.insertAdjacentElement('beforebegin', fObj);
// 凡例項目の位置を調整する
legendMainRect.querySelectorAll('g rect').forEach((rect) => {
rect.setAttribute('x', '5'); // 四角形のX位置を調整する
});
legendMainRect.querySelectorAll('g text').forEach((rect) => {
rect.setAttribute('x', '20'); // テキストのX位置を調整する
});
// テキストのX位置を調整する
legendMainRect.querySelectorAll('g foreignObject').forEach((foreignObj) => {
foreignObj.setAttribute('x', '20'); // foreignObjectのx位置を調整する
});
}
});
const setAttrib = (el: HTMLElement, attribs: any) => {
for (let att in attribs) {
el.setAttribute(att, attribs[att]);
}
};