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值。有没有办法计算标签中文本的宽度（

）

编辑：另外，我不知道这是否有任何帮助，但这个项目已经在画布中完成了。在画布中使用的方法是

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

现在您获得最大宽度（以像素为单位）。

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

2 个答案: