如何使用Javascript / JQuery計算字符串變量的寬度（以像素為單位）

Question

繼續我的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值。 有沒有一種方法可以計算標簽中文本的像素寬度？

編輯：另外，我不知道這是否有幫助，但是該項目已經在canvas中完成。 在畫布上使用的方法是

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

Answer 1

如果要獲取包含文本的SVG元素的寬度，而不是文本本身的長度，可以執行以下操作：

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

其中element是SVG元素。

Answer 2

寬度取決於您使用的字體，因此這樣做並非易事，並且可能始終存在性能問題。

但是，您仍然可以像這樣：

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);
}

現在，您可以得到最大寬度（以像素為單位）。