Html 如何使用Morris.Bar函数在图形中显示Y轴各类别的计数值？

我以图形格式显示数据，并在cshtml页面中使用Morris.Bar函数。Y轴分为以下几类：性能、可维护性、其他、可移植性、可靠性和安全性

我正在使用以下功能：

Morris.Bar({
    element: 'category-bar-chart',
    data: JSON.parse(''[{"y":"Performance","a":23},{"y":"Maintainability","a":106},{"y":"Others","a":98},{"y":"Portability","a":27},{"y":"Reliability","a":87},{"y":"Security","a":14}]'),'),
    xkey: 'y',
    ykeys: ['a'],
    labels: ['Violation'],
    xLabelAngle: 43,            
});

---

但目前它没有在每个栏的顶部显示每个类别的值。我可以知道我可以添加什么属性来获取每个条顶部的值吗？

没有内置参数来显示每个条顶部的值

但您可以扩展Morris以添加此参数。我扩展了Morris，为条形图添加了一个

labelTop

属性。如果设置为

true

，则在每个条的顶部添加一个带值的标签（我对非堆叠条限制了此属性，因为堆叠条有多个值）

用法：

labelTop: true

请尝试下面的代码片段以查看工作示例：

（函数（）{
var$，MyMorris；
MyMorris=window.MyMorris={}；
$=jQuery；
MyMorris=Object.create（Morris）；
MyMorris.Bar.prototype.defaults[“labelTop”]=false；
MyMorris.Bar.prototype.drawLabelTop=函数（xPos、yPos、text）{
var标签；
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）；
};
MyMorris.Bar.prototype.drawSeries=函数（）{
变量barWidth、bottom、groupWidth、idx、lastTop、left、leftPadding、Nubar、row、sidx、size、spaceLeft、top、ypos、zeroPos；
groupWidth=this.width/this.options.data.length；
numBars=this.options.stacked？1:this.options.ykeys.length；
barWidth=（groupWidth*this.options.barSizeRatio-this.options.barGap*（numBars-1））/numBars；
if（this.options.barSize）{
barWidth=Math.min（barWidth，this.options.barSize）；
}
spaceLeft=groupWidth-barWidth*numBars-this.options.barGap*（numBars-1）；
leftPadding=spaceLeft/2；
zeroPos=this.ymin=0？this.transY（0）：空；
返回this.bar=（函数（）{
变量i，len，ref，结果；
_ref=该数据；
_结果=[]；
对于（idx=\u i=0，\u len=\u ref.length；\u i<\u len；idx=+\u i）{
行=_ref[idx]；
lastTop=0；
_结果。推送（（函数（）{
变量j，变量len1，变量ref1，变量results1；
_ref1=行。_y；
_结果1=[]；
对于（sidx=_j=0，_len1=_ref1.length；_j<_len1；sidx=++_j）{
ypos=_ref1[sidx]；
如果（ypos！==null）{
如果（零位）{
top=数学最小值（ypos，zeroPos）；
底部=数学最大值（ypos，zeroPos）；
}否则{
top=ypos；
bottom=this.bottom；
}
left=this.left+idx*groupWidth+leftPadding；
如果（！this.options.stacked）{
left+=sidx*（barWidth+this.options.barGap）；
}
尺寸=底部-顶部；
if（this.options.verticalGridCondition&&this.options.verticalGridCondition（row.x））{
this.drabr（this.left+idx*groupWidth，this.top，groupWidth，Math.abs（this.top-this.bottom），this.options.verticalGridColor，this.options.verticalGridOpacity，this.options.barRadius，row.y[sidx]）；
}
if（this.options.stacked）{
top-=最后一个top；
}
this.drair（左、上、杆宽、尺寸、this.colorFor（行、sidx、'bar'）、this.options.barOpacity、this.options.barRadius）；
_结果1.推送（lastTop+=大小）；
if（this.options.labelTop&！this.options.stacked）{
label=this.drawLabelTop（（左+（barWidth/2）），顶部-10，row.y[sidx]）；
textBox=label.getBBox（）；
_结果：推送（文本框）；
}
}否则{
_结果1.推送（空）；
}
}
返回结果1；
}).叫（这个）；
}
返回结果；
}).打电话（这个）；
};
}).打电话（这个）；
莫里斯酒吧({
元素：“类别条形图”，
数据：[
{“y”：“Performance”，“a”：23}，
{“y”：“可维护性”，“a”：106}，
{“y”：“其他”，“a”：98}，
{“y”：“可移植性”，“a”：27}，
{“y”：“可靠性”，“a”：87}，
{“y”：“安全”，“a”：14}]，
xkey:'y'，
ykeys:[a']，
标签：[“违规”]，
xLabelAngle:43，
拉贝尔托普：没错
});
非常感谢您的回答