如何使用 Javascript/JQuery 以像素为单位计算字符串变量的宽度答案

【问题标题】：How to calculate width of a string variable in pixels using Javascript/JQuery如何使用 Javascript/JQuery 以像素为单位计算字符串变量的宽度
【发布时间】：2013-11-13 06:28:10
【问题描述】：

继续我的 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);

【问题讨论】：

也许你的意思是 label.length 不是 label.width？
@OP：在你的情况下宽度是多少？你如何计算字符串的像素宽度？ @Bonakid：它会返回 undefined 然后不是 NaN :)
题目与实际题目不同。
@Jai 是的，我希望现在更好。是的，我需要标签的宽度（以像素为单位），因为使用该宽度我需要为所有标签构建一个图例。因此，图例宽度是最长标签的宽度。因此，使用 label.length 将无法达到目的。

标签： javascript jquery text svg

【解决方案1】：

如果你想获取包含文本的 SVG 元素的宽度，而不是文本本身的长度，你可以这样做：

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

element 是 SVG 元素。

【讨论】：

标签不包含在任何 SVG 元素中。我正在做的是创建一个 SVG 图表，它需要一个图例来命名所有标签以及与该标签关联的颜色。要创建此图例，我需要所有标签的最大宽度，以便标签适合图例。

【解决方案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);
}

现在你得到了以像素为单位的最大宽度。

【讨论】：