Question

基本上，我需要一种方法来获取图表内的数字和符号（41.05美元），并且将其居中。有办法吗？

我尝试使用相对位置并在第二个div处显示内联块，但它在那里进行了一秒钟，然后“传送”到旧位置。

我正在使用bootstrap和Charts.js

var BTC = '#f2a900'
var Dash = '#008de4'
var XMR = ' #ff6600'

var chDonutData1 = {
    // labels: ['BTC', 'XMR', 'DASH'],
datasets: [
  {
    borderWidth: 5,
    data: [57.03, 28.68, 14.29],
    backgroundColor: [
      BTC,
      XMR,
      Dash
    ],
    borderColor: '#252830',
    }
  ],
};

var options = {
  cutoutPercentage: 80,
}

var chDonut1 = document.getElementById("chDonut1");
if (chDonut1) {
  new Chart(chDonut1, {
      type: 'pie',
      data: chDonutData1, options
  });
}

body{
  background-color: #252830;
}

h1, h2, h3, h4, h5, h6{
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 300;
  line-height: 1.2;
  color: white;
}

h2{
  font-size: 2rem;
}

.Dashboard{
  margin-top: 3%;
  margin-left: 5%;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 85%;
  color: #434857;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.Overview{
  margin-top: 0.5%;
  margin-left: 5%;
  margin-bottom: 5px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
}

.line{
  margin-top: 2rem !important;
  margin-bottom: 1rem;
  margin-left: 5%;
  margin-right: 5%;
  border-top: 1px solid #434857;
}

.chart{
  display: block;
  margin-top: 2rem;
  width: 600px;
  height: 600px;
}

.Quantity{
  color: black;
  text-align: center;
}

.Symbol{
  margin-right: 0.2rem;
  font-size: 2.3rem;
}

.Money{
  font-size: 2rem;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- CSS -->
    <link rel="stylesheet" href="static/css/index.css">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
    <!-- Other Things -->
    <title>Reports</title>
  </head>
  <body>
    <h6 class="Dashboard">Dashboard</h6>
    <h2 class="Overview">Overview</h2>
    <div class="line"></div>
    <div class="chart">
      <canvas id="chDonut1"></canvas>
      <div class="Quantity">
        <span class="Symbol">$</span>
        <span class="Money">41.05</span>
      </div>
    </div>
  </body>
  <!-- JS -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
  <script src="static/js/charts.js"></script>
</html>

Answer 1

仅适用于我的简单CSS解决方案

替换

.Money{
  font-size: 2rem;
}

使用

.Quantity{
  font-size: 2rem;
  margin-top:-5em;
}

如何在chats.js圆形图表中获取文本

1 个答案: