Morris chart -如何在“水平:真”条形图上显示每个条形图的值？
Morris图表是一种基于JavaScript的图表库，用于在网页中创建各种类型的图表，包括条形图、折线图、饼图等。在Morris条形图中，可以通过设置参数来显示每个条形图的值。
要在水平条形图上显示每个条形图的值，可以使用Morris图表库提供的labels和labelColor参数。具体步骤如下：
- 引入Morris图表库的相关文件。在HTML文件的
<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>- 创建一个容器来显示条形图。在HTML文件中添加一个
<div>元素，用于显示条形图：
<div id="bar-chart"></div>- 编写JavaScript代码来生成条形图。在
<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。
相关·内容
1回答
所以，我正在寻找一种方法来做这件事，并找到了this post，但它只适用于垂直条形图。有没有人知道我需要对代码做哪些修改，这样它才能与水平图表一起工作？
浏览 44提问于2020-12-25得票数 0
1回答
LWC图表js:如何以单个水平叠加条形图js在下面的每个条上显示数据集标签
javascript、charts、chart.js、lwc
我使用LwC和ChartJS版本2.8.0构建了一个单一的水平堆叠条形图，现在我想在对应于每个条形图的条形图上显示数据集标签，如“已完成”、“等待”、“正在进行”。下面是我正在尝试实现的屏幕截图示例：Chart.plugins.register(ChartDataLabels); document.getElementById: {
浏览 1提问于2022-09-22得票数 0
回答已采纳
1回答
如何在chart.js堆叠条形图的每个条形中添加数据标签？
bar-chart、chart.js、angular-chart、chart.js2
我在Angular JS中使用了一个指令来使用chart.js。Git链接：
我对使用堆叠条形图很感兴趣。如何在条形图上添加数据标签以显示堆叠条形图中的每个条形值？
浏览 17提问于2016-08-14得票数 0
1回答
Morris.js条形图的自定义悬停图例
javascript、morris.js
我希望自定义我的堆叠条形图上的悬停图例，这样它就不会显示在特定条形图中没有值的标签，但会在其他条形图中显示。希望下面的链接中的图片能帮助你理清思路。图片中三月的标签只有几个标签的值，但显示了所有的标签。我知道我必须使用hoverCallback函数，但我不确定如何只返回包含数据的标签的内容。以下是条形图
浏览 12提问于2016-07-17得票数 1
回答已采纳
1回答
使用PHP的morrisJS条形图填充
javascript、php、mysql、charts、morris.js
我很难用我的MorrisJS数据库中的数据来获取数据来填充我的mySQL条形图。有人能帮我把它显示在我的条形图上吗？ <?>div id="morris-bar-chart"></div>
<?php include ('database.php') ?
浏览 5提问于2015-12-15得票数 1
1回答
使用Chart.js在条形图上显示标签
chart.js
我正在尝试使用chart.js在条形图上显示标签。MyY.-Axis有自定义标签，如: scaleLabel："<%=值+ '$‘%>“
所以，我的条形图y.axis大概是1000美元，2000美元等等。当我在每个栏的顶部显示标签时，这些值显示为1000、2000等。有没有办法在每个条形上显示自定
浏览 1提问于2015-03-18得票数 3
2回答
JFreeChart条形图中条形图的标号
jasper-reports、ireport、jfreechart
请考虑以下图表：
上面的条形图是使用jfreechart构建的。我有两个问题：谢谢..。
浏览 2提问于2012-01-28得票数 0
1回答
可重透视:如何静态地显示可转轴上的值，其中renderName是图表
r、rpivottable
在我的代码中使用r透视函数。R透视提供给我们现成的图形选项，我们可以选择。热图2.条形图3.树形图4.水平叠加条形图等.例如，当选择“水平条形图”时，每当我悬停在每个条形图上时，它就显示了适当的值。
但是，我希望悬停时显示的值在图表上静态显示。因此，不需要悬停，观众就可以看到每个条形图
浏览 3提问于2021-01-29得票数 2
1回答
LWC:如何在闪电网络组件(LwC)中的图表js栏中显示数据值
javascript、chart.js、salesforce-lightning、lwc
我在salesforce中使用LwC版本v2.8.0构建了简单的条形图，所以现在我尝试使用 v1.0.0插件在每个条形图上显示数据值。我已经按下面的代码加载了这个插件，并按照中指定的方式注册了插件，但是数据值并没有显示在每个条形图上。 this.chart.destroy();&#
浏览 12提问于2022-09-13得票数 0
回答已采纳
1回答
Chart.js水平线图或修改的水平条形图
javascript、chart.js
我正在使用chart.js尝试创建与当前日期相关的事件时间线。这与chart.js是可能的吗？
浏览 1提问于2016-07-19得票数 2
回答已采纳
2回答
Morris图。悬停时具有自定义工具提示
jquery、svg、charts、morris.js
我使用morris.js (它依赖于拉斐尔)来创建堆叠条形图。对于每个堆叠的条形图，我希望将条形图中不同级别的拆分显示为工具提示。我尝试使用hoverCallback:，但它似乎不能让我控制悬停在其上的特定元素。我只获取该特定栏的内容。我在这里设置了一个相同的JSBIN示例：
当您将鼠标悬停在条形图上时，它会在底部显示条形图的索引。我希望将内容<
浏览 0提问于2013-11-06得票数 10
回答已采纳
4回答
MPAndroidChart -第一条和最后一条呈现不正确
android、mpandroidchart
在条形图中，我创建的第一行和最后一行一直被切成两半(即使我添加了额外的条)。这也会导致条形图上方的值不合适。我把它放大成碎片。
代码：.javachart.setDrawGridBackground(fal
浏览 5提问于2016-08-08得票数 14
回答已采纳
1回答
如何使用Morris.Bar函数在图中显示Y轴的各个类别的计数值？
html、razor、morris.js
我正在以图形格式显示数据，并在cshtml页面中使用Morris.Bar函数。Y轴有几类:性能、可维护性、其他、可移植性、可靠性和安全性。我使用以下功能： element: 'category-bar-chart', ykeys: ['a'],
浏览 2提问于2016-12-07得票数 2
回答已采纳
1回答
条形图的图表值
chart.js、chart.js2
我正在使用Chart.js，并将其设置为生成一个漂亮的条形图。不幸的是，当您将鼠标悬停在条形图上时，默认弹出窗口仅显示条形图的值。我希望弹出窗口显示组中的每个酒吧的标签和它的值。你有没有什么例子等等？
浏览 9提问于2017-12-27得票数 0
3回答
条形图的iReport中的定制器类
jasper-reports、ireport、jfreechart、jasperserver
我遇到了Ireport条形图的问题。在饼图中，对于图例和图例标签，我使用0、1、2和显示值及其百分比。我想为条形图做类似的事情。我希望按照下面的类别显示每个条形图的值
在论坛中，已经提出了使用定制器类的建议。有没有更简单的方法来满足我的要求？如果我需要使用定制器类，有没有可用的示例？我使用的是最新的i r
浏览 7提问于2013-02-12得票数 1
1回答
无法更改Google工作表数据点格式而不更改其他数据点
google-sheets、google-sheets-charts
我试图确保谷歌单张中水平条形图中的每个条形图都有自己独特的颜色。传统智慧似乎意味着选择图表->右击图表->选择Chart style ->导航到显示在屏幕右侧的样式菜单中的Series ->添加您希望着色的数据点->
浏览 0提问于2019-07-24得票数 0
1回答
是否在Morris.js中将xKey划分为多个属性？
javascript、php、mysql、morris.js
我在一个条形图中显示PHP值，条形图是由Morris.js使用MySQL生成的。目前我只在x轴上显示一个属性，在y轴上显示它的值。是否可以将xkey划分为多个属性？也就是说，对于ID = BBAT102，将显示错误、权限和百分比的值。但相反，我希望在xKey中提到错误、权利和百分比，以便这些属性中的每一个都有自己的栏。
浏览 11提问于2020-03-05得票数 0
回答已采纳
4回答
TChart序列值的鼠标悬停提示
delphi、teechart
我在Delphi7中使用TChart，我想显示一些条形图。我使用以下代码从数据库查询中设置序列值： TBarSeries(chart1.Series[0]).BarStyle:=bsRectGradient;
begin
浏览 2提问于2009-06-25得票数 0
1回答
如何仅在钻取饼上显示数据标签？
javascript、php、laravel、charts、highcharts
嘿，伙计们，我做了一个条形图向下钻到饼图上，所以其中有一个叫做"plotOptions“和" datalabels”的东西，数据标记显示了每个条形图/片的值，但是我希望数据标记只显示在饼图上，而不是显示在条形图上的条形图上，如下所示：
由于您可以看到值"264.50%“和"
浏览 1提问于2017-12-18得票数 2
回答已采纳
1回答
用C#在excel中实现条形图和折线图的合并
c#、excel、bar-chart、linechart
我可以通过下面的MS chart创建条形图和显示条形线：
在运行时，我试图在C#中创建相同的图表，我想将图表导出到excel中。谁能指导我如何在条形图上绘制条形线，或者可以结合条形图线形图，使线形图看起来显示条形图。
浏览 8提问于2012-04-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
