2

私の SVG チャート プロジェクトを続けて、次のような文字列変数としてチャートのラベル (ここでは棒グラフなど) を作成しました。

//Bar Chart series
var barData = [{
                label: "Eating",
               }, {
                label: "Working",
               }, {
                label: "Sleeping",
               }];

凡例を作成するには、各ラベルの幅をピクセル単位で計算する必要があります。それに応じて凡例の幅を計算できるように、最長のラベルの幅を取りたいと思います。コードは次のとおりです。

function legendWidth(paper, config, series){

    var labelWidth = 0;
    for (var n = 0; n < series.length; n++) {
        var label = series[n].label;
        labelWidth = Math.max(labelWidth, label.width);
    }
}

label.width は NaN 値を返します。ラベルのテキストの幅をピクセル単位で計算する方法はありますか?

編集: また、これが役立つかどうかはわかりませんが、このプロジェクトはキャンバスで既に完了しています。キャンバスで使用された方法は

labelWidth = Math.max(labelWidth, context.measureText(label).width);
4

2 に答える 2

1

テキスト自体の長さではなく、テキストを含む SVG 要素の幅を取得する場合は、次のようにします。

var width = $(element)[0].getBoundingClientRect().width;

elementSVG 要素はどこにありますか。

于 2013-11-13T06:36:18.570 に答える
0

幅は使用しているフォントに依存するため、これを行うのは簡単なことではなく、パフォーマンスの問題が常に存在する可能性があります。

ただし、次のようにすることもできます。

var dom = document.createElement("div"),
    maxWidth = 0;
dom.style.cssText = "display:block;width:0;border:0;margin:0;padding:0;overflow:hidden;";
document.body.appendChild("dom");

for (var i in barData) {
    dom.innerHTML = barData[i].label;
    maxWidth = Math.max(maxWidth, dom.scrollWidth);
}

これで、最大幅をピクセル単位で取得できます。

于 2013-11-13T06:44:10.723 に答える