如何在morris.js条形图上放置文本

我有一个morris.js条形图。 我想把count放在这个图的顶部。 我看着morris.js酒吧的文档 ，找不到任何东西。

在hover时，它应显示value但在栏顶部应显示count 。 有没有办法做到这一点？ 像给定图像的东西

这是我的代码

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

这是一个可以测试它的链接 。

Answer 1

我在寻找相同的解决方案时发现了这个问题。 这是在javascript / jquery中完成的。

我可以与您分享我正在使用的代码，我通过试验，错误和研究发现了这些代码。

 function parseSVG(s) { var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); div.innerHTML= ''; 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 = ''+value+''; $("#bar-example").find( "svg" ).append(parseSVG(output)); }); 

输出看起来像这样。

但是你可以尝试的是改变这里的值

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

喜欢的东西

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

这种变化未经测试，但将作为一个良好的起点。

问候 ：）

Answer 2

你可以扩展莫里斯来实现这一目标。 请参阅此答案以查看完整的工作代码段。

添加属性：

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

添加原型以绘制标签：

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

修改Bar.prototype.drawSeries原型，添加这些行（在最后一个之前）：

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

然后在Morris Bar配置中将labelTop属性设置为true：

 labelTop: true 

Answer 3

我发现通过jQuery传递给空p更好

这是最终结果： 最终结果

这是我的代码：

HTML

JS下面的图表代码。 请记住将theData变量更改为您在代码中使用的变量。

  var b=1; jQuery('rect').each(function (i) { $('p.num'+b).text(theData[i].value); b++; }); 

CSS

 .numero{ text-align: center; font-size: 18px !important; font-weight: 600 !important; } 

我还为每种颜色添加了一个类。

希望这有助于任何人:)快乐的编码！

Answer 4

尝试将此代码放在CSS中

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

Answer 5

这是一个开始，它有点hacky，但它完成了工作：

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.text(graphData[i].count); //get the count jQuery('body').append($div); //stick it into the dom console.log($div); }); 

和一些CSS来设置div的样式

CSS

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

希望你可以用它来创建你正在寻找的确切效果

Answer 6

@chiliNUT @ abi1964我放置了多个图表，但我遇到了CSS问题。 数据，条形高度等都可以正常工作，但#s正在堆叠在顶部。 我已经尝试过CSS中每次迭代的位置。 想法或小提琴如何解决这个问题？

多个图形的图像带＃堆叠