我有一个morris.js条形图.我想在该图的顶部放置count.我查看了 morris.js条形文档,找不到任何内容.
I have a morris.js bar graph. I want to place count on top of this graph. I looked into morris.js bar doc, could not find any.
悬停时,它应该显示value,但是在栏的顶部,它应该显示count.有没有办法做到这一点?类似于给定的图像
On hover it should display value but on top of bar it should display count. Is there a way to do that? something like the given image
这是我的代码
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"; } });这里是一个链接,您可以在其中进行测试.
Here is a link where you can test it.
推荐答案我只是在寻找相同的解决方案时发现了这个问题.这是通过javascript/jquery完成的.
I just found this question whilst looking for the same solution. This is done in javascript / jquery.
我可以与您分享我正在通过尝试,错误和研究发现的代码.
I can share with you the code I am using which I discovered by trial, error and research.
function parseSVG(s) { var div= document.createElementNS('www.w3/1999/xhtml', 'div'); div.innerHTML= '<svg xmlns="www.w3/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 = theData[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 "Arial"" 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)); });输出看起来像这样.
但是您可以尝试的是在此处更改值
But what you can try, is change the values here
var newY = parseFloat( $(this).attr('y') - 20 );类似
var halfHeight = parseFloat( $(this).attr('height') / 2 ); var newY = parseFloat( $(this).attr('y') - halfHeight );此更改未经测试,但将是一个很好的起点.
This change is untested, but will act as a good starting point.
此致:)
更多推荐
如何在morris.js条形图上放置文本
发布评论