Добавьте дополнительный столбец в SVG rgraph для отображения значений гистограммы - PullRequest
Новая
       25

Добавьте дополнительный столбец в SVG rgraph для отображения значений гистограммы

0 голосов
/ 07 ноября 2018

Hbar-бар выглядит так:

enter image description here

Я хотел добавить дополнительный столбец в конце для отображения значений бара. Я хочу добавить 2 столбца для отображения номера 2 и 3 в первой строке.

Я хочу, чтобы мой график выглядел так:

Я пытался добавить в svg, но он не отображается.

Как правильно динамически добавлять дополнительные столбцы в rgraph для SG?

FYI

Я добавил столбцы, используя jquery

enter image description here

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 Ответ

0 голосов
/ 08 ноября 2018

Примерно так: 

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