javascript - 将文字右对齐

我正在使用codepen.io，正在创建条形图。
该图具有比例尺：一个在左侧，一个在右侧。

问题是我希望左侧的值文本右对齐。我无法使用CSS来做到这一点，而且我相信javascript可以胜任。

这是我用来绘制比例的两个函数，到项目的链接如下。

function drawScalesLeft(numOfScales)
{
    console.log("Zeichne linke Skala mit " + numOfScales + " Einheiten");
    for(i=0; i <= numOfScales ; i++)
    {
        var currentHeight = document.getElementById('bargraph').height;
        var yPos = 279.75 * i / numOfScales + 10;
        var marker = document.createElementNS(svgNS,"rect");
            marker.setAttributeNS(null, 'x', 115);
            marker.setAttributeNS(null, 'y', yPos);
            marker.setAttributeNS(null, 'height', 0.2);
            marker.setAttributeNS(null, 'width', 10);
        document.getElementById("bargraph").appendChild(marker);
        var markerText = document.createElementNS(svgNS,"text");
            markerText.setAttributeNS(null, 'x', 50); //Textposition (horinzontal)
            markerText.setAttributeNS(null, 'y', yPos+5);

            markerText.textContent = (100-100 *i/ numOfScales).toFixed(digits) + " %";
        document.getElementById("bargraph").appendChild(markerText);
   }
}

function drawScalesRight(numOfScales)
{
    console.log("Zeichne rechte Skala mit " + numOfScales + " Einheiten");

    for(i=0; i <= numOfScales; i++)
    {
        var currentHeight = document.getElementById('bargraph').height;
        var yPos = 279.75 * i / numOfScales + 10;
        var marker = document.createElementNS(svgNS,"rect");
            marker.setAttributeNS(null, 'x', 175);
            marker.setAttributeNS(null, 'y', yPos);
            marker.setAttributeNS(null, 'height', 0.2);
            marker.setAttributeNS(null, 'width', 10);
        document.getElementById("bargraph").appendChild(marker);
        var markerText = document.createElementNS(svgNS,"text");
            markerText.setAttributeNS(null, 'x', 195);//Textposition (horinzontal)
            markerText.setAttributeNS(null, 'y', yPos+5);
            markerText.textContent = (500-500 * i/ numOfScales).toFixed(digits2) + " m";
        document.getElementById("bargraph").appendChild(markerText);
    }
}

完整代码：

codepen.io/Cleanwater/pen/LWQyJm?editors=0010

最佳答案

您需要正确计算x节点的text值。

在55行之后，如下所示

document.getElementById("bargraph").appendChild(markerText);

加上这个

markerText.setAttributeNS(null, 'x', 100 - markerText.getBBox().width);

一切都应该很好。

另外，删除行50

markerText.setAttributeNS(null, 'x', 50); //Textposition (horinzontal)

关于javascript - 将文字右对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43063732/