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 回答