Morris图表是一种基于JavaScript的图表库,用于在网页中创建各种类型的图表,包括条形图、折线图、饼图等。在Morris条形图中,可以通过设置参数来显示每个条形图的值。
要在水平条形图上显示每个条形图的值,可以使用Morris图表库提供的labels
和labelColor
参数。具体步骤如下:
<head>
标签中添加以下代码:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div>
元素,用于显示条形图:<div id="bar-chart"></div>
<script>
标签中添加以下代码:Morris.Bar({
element: 'bar-chart',
data: [
{ x: 'A', y: 3 },
{ x: 'B', y: 5 },
{ x: 'C', y: 2 },
{ x: 'D', y: 6 },
{ x: 'E', y: 4 }
],
xkey: 'x',
ykeys: ['y'],
labels: ['Value'],
labelColor: '#000',
horizontal: true
});
在data
参数中,设置每个条形图的值。在labels
参数中,设置显示在每个条形图上的标签文本。在labelColor
参数中,设置标签文本的颜色。通过将horizontal
参数设置为true
,可以生成水平条形图。
以上代码中的数据和参数仅供参考,你可以根据实际情况进行修改和调整。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和云数据库MySQL。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云