Javascript 如何在morris.js条形图上放置文本
我有一个morris.js条形图。我想把Javascript 如何在morris.js条形图上放置文本,javascript,jquery,morris.js,Javascript,Jquery,Morris.js,我有一个morris.js条形图。我想把count放在这个图表的顶部。我查看了一下,没有找到任何 悬停时,它应显示值,但在条形图顶部,它应显示计数。有办法吗?类似于给定的图像 这是我的密码 Morris.Bar ({ element: 'bar-example', data: [ {mapname: 's1', value: 10, count: 3}, {mapname: 's2', value: 4, count: 4}, {mapname: 's3', v
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";
}
});
您可以在其中进行测试。尝试将此代码放在CSS中
.morris-hover{position:absolute;z-index:1000;}
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);
});
.count{
position:absolute;
width:10px;
height:20px;
line-height:20px;
color:white;
font-weight:bold;
}
.numero{
text-align: center;
font-size: 18px !important;
font-weight: 600 !important;
}
这是一个开始,有点粗糙,但它完成了工作: JS
.morris-hover{position:absolute;z-index:1000;}
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);
});
.count{
position:absolute;
width:10px;
height:20px;
line-height:20px;
color:white;
font-weight:bold;
}
.numero{
text-align: center;
font-size: 18px !important;
font-weight: 600 !important;
}
希望你能用它来创造你想要的效果
我在寻找相同的解决方案时发现了这个问题。这是在javascript/jquery中完成的 我可以和你们分享我正在使用的代码,这些代码是我通过尝试、错误和研究发现的
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 = 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));
});
差不多
var halfHeight = parseFloat( $(this).attr('height') / 2 );
var newY = parseFloat( $(this).attr('y') - halfHeight );
这一变化未经测试,但将作为一个良好的起点
问候:)@chiliNUT@abi1964我放置了多个图表,但我在CSS中遇到了一个问题。数据、酒吧高度等都很好,但是#被堆放在顶部。我已经尝试了CSS中每个位置的迭代。想法或小提琴如何解决这个问题
您可以扩展Morris来实现这一点。请参阅此部分以查看完整的工作片段 添加属性:
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
prototype,添加以下行(在最后一行之前):
然后在Morris条形图配置中将labelTop
属性设置为true:
labelTop: true
我发现通过jQuery传递给一个空的p更好 这是最终结果: 这是我的代码: HTML
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<p class="numero num1"></p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<p class="numero num2"></p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<p class="numero num3"></p>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 ">
<p class="numero num4"></p>
</div>
</div>
CSS
.morris-hover{position:absolute;z-index:1000;}
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);
});
.count{
position:absolute;
width:10px;
height:20px;
line-height:20px;
color:white;
font-weight:bold;
}
.numero{
text-align: center;
font-size: 18px !important;
font-weight: 600 !important;
}
我还为每种颜色添加了一个类
希望这对任何人都有帮助:)
快乐编码
感谢您的回复,但不仅仅是在悬停状态,而且在所有时间,它都应该在条形图顶部显示
count
。您是否找到解决此问题的方法?我也在想同样的事情。这件事运气好吗?我也有同样的问题!voidwalker&@Pooshonk:还没有..你的例子有任何演示链接吗?做得很好,但是在var value=theJson[index]行有未定义的变量theJson
代码>