Bootstrap选项卡中的Morris面积图
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网页。其中，选项卡是Bootstrap中常用的组件之一，可以实现页面内容的切换和展示。
Morris面积图是一种基于JavaScript的数据可视化图表，它可以用来展示数据随时间变化的趋势。面积图通过填充折线图下方的区域来表示数据的变化范围，可以直观地展示数据的增长或下降趋势。
Morris面积图的优势在于简单易用、美观大方，适用于展示时间序列数据的变化趋势。它可以帮助用户更好地理解数据的变化规律，从而做出相应的决策。
在使用Bootstrap的选项卡中展示Morris面积图时，可以通过以下步骤实现：
- 引入必要的CSS和JavaScript文件：在HTML文件中引入Bootstrap和Morris的CSS和JavaScript文件，确保它们能够正确加载。
- 创建选项卡结构：使用Bootstrap的选项卡组件创建选项卡的结构，包括选项卡标题和内容区域。
- 在选项卡内容区域中添加Morris面积图：在每个选项卡的内容区域中添加一个容器元素，用于展示Morris面积图。
- 使用JavaScript代码初始化和配置Morris面积图：在页面加载完成后，使用JavaScript代码初始化和配置Morris面积图。可以设置图表的类型、数据源、样式等参数。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap选项卡中的Morris面积图</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/morris.js/morris.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#tab1">选项卡1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#tab2">选项卡2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<div id="chart1"></div>
</div>
<div class="tab-pane fade" id="tab2">
<div id="chart2"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/dist/raphael.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/morris.js/morris.min.js"></script>
<script>
// 初始化和配置Morris面积图
new Morris.Area({
element: 'chart1',
data: [
{ year: '2015', value: 20 },
{ year: '2016', value: 10 },
{ year: '2017', value: 5 },
{ year: '2018', value: 15 },
{ year: '2019', value: 25 }
],
xkey: 'year',
ykeys: ['value'],
labels: ['数值'],
lineColors: ['#007bff'],
fillOpacity: 0.5,
hideHover: 'auto',
behaveLikeLine: true
});
new Morris.Area({
element: 'chart2',
data: [
{ year: '2015', value: 30 },
{ year: '2016', value: 15 },
{ year: '2017', value: 10 },
{ year: '2018', value: 20 },
{ year: '2019', value: 35 }
],
xkey: 'year',
ykeys: ['value'],
labels: ['数值'],
lineColors: ['#dc3545'],
fillOpacity: 0.5,
hideHover: 'auto',
behaveLikeLine: true
});
</script>
</body>
</html>在上述示例代码中，我们使用了Bootstrap的选项卡组件创建了两个选项卡，并在每个选项卡的内容区域中添加了一个容器元素（<div id="chart1"></div>和<div id="chart2"></div>）。然后，使用JavaScript代码初始化和配置了两个Morris面积图，分别展示了不同年份的数值数据。
以上是关于Bootstrap选项卡中的Morris面积图的完善且全面的答案。如果您对其他云计算、IT互联网领域的名词词汇有任何疑问，欢迎继续提问。
相关·内容
我尝试在两个不同的Bootstrap选项卡中使用两个Morris面积图。第一个选项卡可以正常加载，因为这是加载页面时打开的选项卡。但是，第二个选项卡包含一个未填充的图形。这就是我尝试过的(在这里找到https://codeday.me/bug/20181225/460886.html (我用谷歌翻译的)) 图表<e
浏览 34提问于2019-01-14得票数 0
有一种情况是，我试图在两个不同的MorrisJS中使用图表。图表在第一个(默认)选项卡中加载得很好，但是当我单击第二个选项卡时，图表根本没有正确加载。这是非常奇怪的，因为我是复制和粘贴完全相同的图表是在第一和第二个标签，但第二个不是为我加载。以下是代码：<div> </div>
浏览 1提问于2016-11-09得票数 12
回答已采纳
我正在尝试为morris.js中的面积图设置自定义颜色。我使用了lineColors选项，但是线条下面的区域颜色是某种不透明的。将fillingOpacity设置为1不会更改任何内容。
浏览 1提问于2016-02-19得票数 2
回答已采纳
1回答
bootstrap 4 accordion中的Morris图表不能正常工作。 我正在学习bootstrap 4并使用bootstrap测试morris图表，并且能够让它完美地工作。但是，当我尝试将图表放入折叠板中时，图表不能正确显示，并且在我调整窗口大小时显示。我尝试了许多来自社区的建议，但似乎没有一个有效。尝试使用shown.bs.collapse选项，但没有成功。感谢你的帮助 <!morris</e
浏览 16提问于2019-05-12得票数 0
1回答
我正在尝试使用JSON文件提供的Morris.js来绘制面积图。我的JSON如下：
[{"period": 0, "time": 121.0}, {"period": 1, "time": 102.0}, {"period": 2, "time": 104.0},{"period": 7, "time": 95.0}, {"period&
浏览 1提问于2015-05-25得票数 0
我在index.html中包含了所有脚本，但每次单击链接时，只执行html和css。我必须重新加载页面才能让一切正常工作。这是我的index.html源代码 <link href="assets/css/bootstrap.css" rel="stylesheet" &
浏览 3提问于2017-06-28得票数 1
2回答
我正在为我们学校做一个项目，我需要一个条形图。我决定使用Morris Js，因为它在我下载的Bootstrap主题中有一个很好的示例。我的问题是，我不知道如何将数据库中的MySQL值导入JavaScript。这是条形图的javascript代码： $(function() {
Mo
浏览 2提问于2015-09-01得票数 1
回答已采纳
1回答
使用此模板现场工作演示程序如下：火狐控制台打印时，通过烧瓶访问。错误:图容器元素未找到morris.min.js:6:1340
<title>Startmin - Bootstrap Admin Theme</title>--
浏览 0提问于2018-02-02得票数 0
3回答
我有两个制表符，每个有一个morris.js图。第一个(活动)选项卡中的图加载得很好，但是第二个选项卡中的图没有加载( Chrome中的结果奇怪，Firefox中没有)。
浏览 4提问于2014-03-02得票数 0
回答已采纳
1回答
我想要做一个曲线图表，在某些日期显示RCs要求的数量。X轴包含日期，Y轴包含值，我还添加了显示接受/拒绝需求百分比的饼图。当我单独尝试代码时，它可以工作，但当我将它作为代码的一部分添加到author文件中时:第一次，它除了修改高度和宽度之外，不显示任何内容：<link rel="stylesheet" type="text/css"
浏览 2提问于2017-08-28得票数 0
回答已采纳
/node_modules/morris.js/morris.js", "assets/js/scripts.js"]impo
浏览 1提问于2017-09-08得票数 0
1回答
Morris图表-选项卡中的覆盖
、、、、
我在Bootstrap选项卡中使用Morris图表(每个选项卡都有不同时间段的图表)。搜索此站点后，我发现为了在选项卡中显示图表，我应该使用以下代码：new Morris.Line({......chart_data_goes_here
它运行良好(当不使用代码时，图表仅显示在第一个选项卡中
浏览 0提问于2015-05-19得票数 0
在我向routerConfig添加"useHash:true“和”我的面积图“成为折线图之前，我的ApexCharts”面积图“一直工作正常。在routerConfig中使用"useHash:true“时，如何恢复我的面积图？// Layout
RouterModule.forRoot(appRoutes, routerConfig)
浏览 20提问于2021-04-05得票数 0
回答已采纳
我有一张图，画出x轴的日期，在y轴上睡上几个小时。如果我显示7天的数据，x轴显示每个日期和图形看起来很好：当我将价值8周的数据放入图表中时，morris.js会自动调整x轴标签的精度，以显示更少的日期(很好！)但不对图点进行相同的调整，因此图如下所示：如何使morris.js只在每个标签间隔上放置点？下面是显示图形的代码：
浏览 2提问于2014-05-08得票数 2
我有一个Morris JS图表，试图在Twitter引导选项卡窗格中加载。标签正常工作，但图表不会加载。我将如何将他们的解决方案转化为我的Rails代码？这是我的代码：<!function (e) { $(this).tab('show')ControllerName.js.coffee # only use morrisif $(
浏览 2提问于2014-03-01得票数 8
我通过从数据库中检索值创建了条形图，.And使用Morris-.And. get .第一次从选项中选择值时，我得到了正确的条形图。 Morris.Bar({
element: 'hero-bar',
浏览 3提问于2014-07-12得票数 0
回答已采纳
1回答
我想在calcutions.AnyOne中实现一个面积图。我更喜欢面积图，因为我想用一些android.I绘制我的android.I图的面积。有一个想法是如何实现面积图？
浏览 1提问于2012-05-29得票数 0
我用morris.js区域图来显示一年的天气报告。小提琴POC：Morris.Area({ data: [ { m: 'Feb', value: 10
浏览 5提问于2015-05-14得票数 1
回答已采纳
1回答
在中，面积图覆盖在条形图的顶部。我希望我的图表中的面积图在条形图的“后面”。对于我的用例中的数据，面积图值将始终高于条形图的值。
浏览 3提问于2015-03-18得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
