在SVG rgraph中添加其他列以显示条形图的值

问题描述

限时删除！！

我的hbar栏看起来像:

I have a hbar bar looking like:

我想在末尾添加其他列以显示条形值.我想添加2列以在第一行显示数字2和3.

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:

我尝试在svg中添加，但未显示.

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

FYI

我使用jquery添加了列

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

推荐答案

然后这样:

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

这篇关于在SVG rgraph中添加其他列以显示条形图的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..