jquery - 在 SVG rgraph 中添加附加列以显示条形图的值

Question

我有一个 hbar 栏，看起来像：

我想在末尾添加额外的列来显示条形值。我想添加 2 列以在第一行显示数字 2 和 3。

我希望我的图表看起来像这样：

我试图在 svg 中附加，但它没有显示。

在 rgraph 中为 SG 动态添加其他列的正确方法是什么？

FYI

我使用 jquery 添加了列

data = obj.data;

$.each(obj.properties.yaxisLabels, function(i, v) {
  var nodes = RGraph.SVG.text.find({
    object: obj,
    text: v
  });
  RGraph.SVG.text({
    object: obj,
    parent: obj.svg,
    text: Math.round(data[i][0]),
    x: +$(nodes).attr('x') + obj.graphWidth + 8,
    y: $(nodes).attr('y'),
    halign: 'left',
    valign: 'center',
    // background: '#FFDE00',
    size: 12,
    // padding: 1,
    color: 'black',
    // color:  '#999'
  });
  RGraph.SVG.text({
    object: obj,
    parent: obj.svg,
    text: Math.round(data[i][1]),
    x: +$(nodes).attr('x') + obj.graphWidth + 23,
    y: $(nodes).attr('y'),
    halign: 'left',
    valign: 'center',
    // background: '#097054',
    backgroundGridVlines: true,
    backgroundGridBorder: true,
    size: 12,
    color: 'black'
    // padding: 1,
    // color:  '#999'
  });
})

Answer 1

然后是这样的：

var hbar = new RGraph.SVG.HBar({
    id: 'cc',
    data: [[2,3],[1,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],
    options: {
        yaxisLabels: ['Abc','Def','Ghi','Jkl','Mno','Pqr','Stu','Vwx','Yz','nuj'],
        xaxis: false,
        yaxis: false,
        colors: ['yellow','green'],
        gutterLeft: 50,
        gutterLeftAutosize: false,
        gutterRight: 75
    }
}).grow();

// Add the text that gives the percentages
for (var i=0; i<hbar.coords.length; ++i) {

    var value = hbar.coords[i].element.getAttribute('data-value'),
        y     = (i % 2 === 0) ? hbar.coords[i].y + hbar.coords[i].height + 5 : y,
        x     = (i % 2 === 0) ? hbar.width - hbar.properties.gutterRight + 10 : x + 35;

    RGraph.SVG.text({
        object: hbar,
        text: value + '%',
        x: x,
        y: y,
        color: 'black',
        halign: 'left',
        valign: 'center',
        size: 12
    });
}