javascript - 如何使用 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 中完成了。在 Canvas 中使用的方法是

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

Answer 1

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

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

element 是 SVG 元素。