Add additional column in SVG rgraph to display values of bar graph

问题

I have a hbar bar looking like:

I wanted to add additional column at the end to display bar values. I want to add 2 columns to display number 2 and 3 on the first row.

I want my graph to look like this:

I tried to append in the svg but It is not showing.

What is the proper way to dynamically add additional Columns in rgraph for SG?

FYI

I added the columns using 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'
  });
})

回答1:

Something like this then:

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

来源：https://stackoverflow.com/questions/53182270/add-additional-column-in-svg-rgraph-to-display-values-of-bar-graph

标签

jquery

svg

rgraph