Come inserire un text sul grafico a barre di morris.js

Ho un grafico a barre morris.js. Voglio mettere il count in cima a questo grafico. Ho esaminato il doc del doc morris.js , non ho trovato nessuno.

In hover dovrebbe visualizzare il value ma in cima alla barra dovrebbe visualizzare il count . C'è un modo per farlo? qualcosa come l'image data

immettere qui la descrizione dell'immagine

Ecco il mio codice

 Morris.Bar ({ element: 'bar-example', data: [ {mapname: 's1', value: 10, count: 3}, {mapname: 's2', value: 4, count: 4}, {mapname: 's3', value: 12, count: 13} ], xkey: 'mapname', ykeys: ['value'], labels: ['No. of days'], barRatio: 0.4, xLabelAngle: 35, hideHover: 'auto', barColors: function (row, series, type) { console.log("--> "+row.label, series, type); if(row.label == "s1") return "#AD1D28"; else if(row.label == "s2") return "#DEBB27"; else if(row.label == "s3") return "#fec04c"; } }); 

Ecco un collegamento where è ansible testarlo.

Ho appena trovato questa domanda mentre cercavo la stessa soluzione. Questo è fatto in javascript / jquery.

Posso condividere con te il codice che sto usando che ho scoperto da prove, errori e ricerche.

 function parseSVG(s) { var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>'; var frag= document.createDocumentFragment(); while (div.firstChild.firstChild) frag.appendChild(div.firstChild.firstChild); return frag; } var theData = [ {mapname: 's1', value: 10, count: 3}, {mapname: 's2', value: 4, count: 4}, {mapname: 's3', value: 12, count: 13} ] Morris.Bar ({ element: 'bar-example', data: theData, xkey: 'mapname', ykeys: ['value'], labels: ['No. of days'], barRatio: 0.4, xLabelAngle: 35, hideHover: 'auto', barColors: function (row, series, type) { console.log("--> "+row.label, series, type); if(row.label == "s1") return "#AD1D28"; else if(row.label == "s2") return "#DEBB27"; else if(row.label == "s3") return "#fec04c"; } }); var items = $("#bar-example").find( "svg" ).find("rect"); $.each(items,function(index,v){ var value = theJson[index].count; var newY = parseFloat( $(this).attr('y') - 20 ); var halfWidth = parseFloat( $(this).attr('width') / 2 ); var newX = parseFloat( $(this).attr('x') ) + halfWidth; var output = '<text style="text-anchor: middle; font: 12px sans-serif;" x="'+newX+'" y="'+newY+'" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="12px" font-family="sans-serif" font-weight="normal" transform="matrix(1,0,0,1,0,6.875)"><tspan dy="3.75">'+value+'</tspan></text>'; $("#bar-example").find( "svg" ).append(parseSVG(output)); }); 

L'output sembra così.

immettere qui la descrizione dell'immagine

Ma quello che puoi provare è cambiare i valori qui

 var newY = parseFloat( $(this).attr('y') - 20 ); 

a qualcosa di simile

 var halfHeight = parseFloat( $(this).attr('height') / 2 ); var newY = parseFloat( $(this).attr('y') - halfHeight ); 

Questa modifica è non testata, ma agirà come un buon punto di partenza.

Saluti 🙂

Puoi estendere Morris per raggiungere questo objective. Fare riferimento a questa risposta per visualizzare un completo snippet di lavoro.

Aggiungere una properties;:

 Bar.prototype.defaults["labelTop"] = false; 

Aggiungere un prototipo per disegnare l'etichetta:

 Bar.prototype.drawLabelTop = function(xPos, yPos, text) { var label; return label = this.raphael.text(xPos, yPos, text) .attr('font-size', this.options.gridTextSize) .attr('font-family', this.options.gridTextFamily) .attr('font-weight', this.options.gridTextWeight) .attr('fill', this.options.gridTextColor); }; 

Modificare il Bar.prototype.drawSeries Bar.prototype.drawSeries, aggiungendo queste righe (prima dell'ultimo altro):

 if (this.options.labelTop && !this.options.stacked) { label = this.drawLabelTop((left + (barWidth / 2)), top - 10, row.y[sidx]); textBox = label.getBBox(); _results.push(textBox); } 

Quindi impostare la properties; labelTop su true nella tua configuration di Morris Bar:

 labelTop: true 

Provi inserendo questo codice in CSS

 .morris-hover{position:absolute;z-index:1000;} 

Ecco un inizio, è un po 'scioccato, ma si ottiene il lavoro fatto:

JS

  var graphData= [ {mapname: 's1', value: 10, count: 3}, {mapname: 's2', value: 4, count: 4}, {mapname: 's3', value: 12, count: 13} ]; //store this to its own var so we can access the counts later var bar=Morris.Bar ({ element: 'bar-example', data:graphData, xkey: 'mapname', ykeys: ['value'], labels: ['No. of days'], barSizeRatio:0.4, //I think you meant barSizeRatio, not barSize xLabelAngle: 35, hideHover: 'auto', barColors: function (row, series, type) { //console.log("--> "+row.label, series, type); if(row.label == "s1") return "#AD1D28"; else if(row.label == "s2") return "#DEBB27"; else if(row.label == "s3") return "#fec04c"; } }); //first, find the width of a bar //this is bar-example width, divided by three, times barSizeRatio var barWidth=($('#bar-example').width()/3)*(0.4); //now each thru each bar (rect) jQuery('rect').each(function (i) { var pos=$(this).offset(); var top=pos.top; top-=20; //originate at the top of the bar //get the height of the bar var barHeight=bar.bars[i]; top+=barHeight/2; //so we can now stick the number in the vertical-center of the bar as desired var left=pos.left; //move it over a bit left+=barWidth/2; //-size of element... left-=10;//should approximately be horizontal center $div=jQuery('<div class="count" style="top:'+top+'px;left:'+left+'px;" />'); $div.text(graphData[i].count); //get the count jQuery('body').append($div); //stick it into the dom console.log($div); }); 

e alcuni CSS per stile i div

CSS

 .count{ position:absolute; width:10px; height:20px; line-height:20px; color:white; font-weight:bold; } 

speriamo di poter eseguire con quello per creare l'effetto esatto che stai cercando

immettere qui la descrizione dell'immagine

@chiliNUT @ abi1964 Ho messo più grafici ma sto avendo un problema con il CSS. I dati, l'altezza della barra ecc. Funzionano tutti bene ma i # sono impilati in cima. Ho provato each iterazione di posizione nel CSS. Idee o un violino come risolvere questo problema?

image di grafici multipli con impilamento di w / #