html - 如何在我的视图中显示其他 div 附近的 2 行中的 4 个图表
问题描述
我正在实施 asp.net 核心项目。我想创建一个包含 3 个 div 的仪表板，这些 div 包含一些数字，我成功地创建了它们。我还有 4 个图表，我在这里发布了它们的相关代码，我想将其中一个图表放在第一行的 3 个 div 附近，并在第二行显示其他 3 个图表彼此靠近。但我没有任何意见，我怎么能像我提到的那样向他们展示。
我是 html 和 css 的业余爱好者。如果有人建议我解决我的问题，我将不胜感激。此外，最好建议使用任何其他更好或更简单的替代解决方案来显示这些二维图表。
我试过的：
这是我显示图表的代码：
@using System.Linq;
@model List<MyDashboard.Models.ChartModel>
@{
var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.DimensionOne).ToList());
var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.Quantity).ToList());
ViewData["Title"] = "Pie Chart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Pie</title>
</head>
<body>
<div class="box-body">
<div class="chart-container">
<canvas id="chart" style="width:100%; height:500px"></canvas>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels),
datasets: [{
label: "Drinks Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'pie'
});
});
</script>
显示折线图的代码如下：
@{
var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.GrantedPercent.FirstOrDefault().DimensionOne).ToList());
var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Select(x => x.GrantedPercent.FirstOrDefault().Quantity).ToList());
ViewData["Title"] = "Line Chart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Line</title>
</head>
<body>
<div class="box-body">
<div class="chart-container">
<canvas id="chart" style="width:100%; height:500px"></canvas>
</div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var chartName = "chart";
var ctx = document.getElementById(chartName).getContext('2d');
var data = {
labels: @Html.Raw(XLabels1),
datasets: [{
label: "Countries Chart",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 0, 0)',
'rgba(0, 255, 0)',
'rgba(0, 0, 255)',
'rgba(192, 192, 192)',
'rgba(255, 255, 0)',
'rgba(255, 0, 255)'
],
borderWidth: 1,
data: @Html.Raw(YValues1)
}]
};
var options = {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: true,
color: "rgba(255,99,164,0.2)"
}
}],
xAxes: [{
ticks: {
min: 0,
beginAtZero: true
},
gridLines: {
display: false
}
}]
}
};
var myChart = new Chart(ctx, {
options: options,
data: data,
type:'line'
});
});
</script>
这是我前面提到的关于显示那些 div 的代码：
<html>
<body class="w3-light-grey">
<div class="w3-main" style="margin-left:300px;margin-top:43px;">
<!-- Header -->
<header class="w3-container" style="padding-top:22px">
<h5> My Dashboard</h5>
</header>
<div class="w3-row-padding w3-margin-bottom">
<div class="w3-quarter">
<div class="w3-container w3-red w3-padding-16">
<div class="w3-left"></div>
<div class="w3-right">
<h3>@ViewBag.TotalApiCount</h3>
</div>
<div class="w3-clear"></div>
<h4>API number</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-blue w3-padding-16">
<div class="w3-left"></div>
<div class="w3-right">
<h3>@ViewBag.TotalApplicantCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Applicant number</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-teal w3-padding-16">
<div class="w3-left"></div>
<div class="w3-right">
<h3>@ViewBag.grantedCount</h3>
</div>
<div class="w3-clear"></div>
<h4>Granted API </h4>
</div>
</div>
</body>
</html>
解决方案
选项 1：引导程序
安装引导程序后，您可以轻松使用以下样式：
<div class="row">
<div class="col">
<!-- cell 1 -->
</div>
<div class="col">
<!-- cell 2 -->
</div>
<div class="col">
<!-- cell 3 -->
</div>
<div class="col">
<!-- pie chart -->
</div>
</div>
<div class="row">
<div class="col">
<!-- line chart -->
</div>
<div class="col">
<!-- line chart -->
</div>
<div class="col">
<!-- line chart -->
</div>
</div>
选项 2 - 使用表格
如果您不想安装引导程序，只需创建一个表：
<table>
<tr>
<td>
<!-- cell 1 -->
</td>
<td>
<!-- cell 2 -->
</td>
<td>
<!-- cell 3 -->
</td>
<td>
<!-- pie chart -->
</td>
</tr>
<tr>
<td>
<!-- line chart -->
</td>
<td>
<!-- line chart -->
</td>
<td colspan="2">
<!-- line chart -->
</td>
</tr>
</table>
或者您可以为第二行创建另一个表格，以使所有单元格的宽度均匀。
推荐阅读
- python - 如何检测信号或时间序列数据中的正弦模式？
- rust - Rust 中的 Into 是什么意思？
- node.js - Mongoose .save 函数返回“未找到 id "32fdj..." 版本 0 modifiedPaths "cmRooms" 的匹配文档'
- android - 我应该在这里传递什么论点
- keras - 模型停止后从层输出最终值（不是权重）
- javascript - 反应/快速访问以从 CORS 策略阻止的 Origin 获取
- bash - 真正接受来自 bash 文件的无限参数
- twitter-bootstrap - 导航栏切换器不适用于 Bootstrap 4
- c# - VSTO - Outlook 如何从邮件 ID 跟踪电子邮件
- django - 将Ajax添加到Django中的like按钮