javascript - 手风琴内的莫里斯图表显示不正确
问题描述
bootstrap 4 手风琴中的 Morris 图表无法正常工作。
我正在学习 bootstrap 4 并使用 bootstrap 测试 morris 图表,并且能够让它完美地工作。但是当我尝试将图表放在手风琴内时,图表无法正确显示并在我调整窗口大小时显示。我尝试了社区的许多建议,但似乎都没有奏效。尝试使用 shown.bs.collapse 选项,但没有运气。下面是代码。感谢帮助
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
</head>
<body>
<div class="container">
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
<div id="area-chart" ></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="line-chart"></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
<div id="bar-chart" ></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var data = [
{ y: '2014', a: 50, b: 90},
{ y: '2015', a: 65, b: 75},
{ y: '2016', a: 50, b: 50},
{ y: '2017', a: 75, b: 60},
{ y: '2018', a: 80, b: 65},
{ y: '2019', a: 90, b: 70},
{ y: '2020', a: 100, b: 75},
{ y: '2021', a: 115, b: 75},
{ y: '2022', a: 120, b: 85},
{ y: '2023', a: 145, b: 85},
{ y: '2024', a: 160, b: 95}
],
config = {
data: data,
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Total Income', 'Total Outcome'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['gray','red']
};
config.element = 'area-chart';
Morris.Area(config);
config.element = 'line-chart';
Morris.Line(config);
config.element = 'bar-chart';
Morris.Bar(config);
</script>
</html>
解决方案
这是 Morris 在隐藏相关图表时的典型问题,它的主要元素的维度没有 . 如果在显示手风琴卡片时有关联的事件,您可以使用下面的代码行(此示例用于区域图)将大小调整<svg>
为<div id='area-chart'>
$('#area-chart svg').css({width: $('#area-chart').width() });
$('#area-chart svg').css({height: $('#area-chart').height() });
推荐阅读
- c# - 您可以将事件附加到您无法修改的属性吗?
- ruby-on-rails - 未知键::表达式。有效键是::unique、:order、:name、:where、:length、:internal、:using、:algorithm、:type
- javascript - Javascript - 仅在设备处于横向时显示 div
- python - 为什么 pip 没有成功安装 python 和非 python 文件?
- postgresql - 如何在 Postgresql 查询中正确使用子查询
- sql - 清理“重复”数据,同时保留最新条目
- javascript - AJAX 表单重定向到空页面而不是记录数据
- macos - 从命令行启动 docker
- javascript - 任何能够检测到不存在的类方法的javascript linter?
- r - 如何在闪亮的框架内自定义单选按钮中的选择值