Bootstrap > 水平扩展 ChartJS canvas 以匹配溢出的列

Question

我在 bootstrap 中有一个非常基本的文档，有 2 行。一个具有“n”个水平溢出的列，一个底部图表需要响应以匹配顶行的 n 个列。

ChartJS 似乎正在使用父级 div 的尺寸来使所有内容响应，但我似乎无法使父级（第二行）具有与第一行相同的宽度。有什么想法吗？谢谢。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ['', '', '', '', '', '', '', '', ''],
    datasets: [{
        label: "foo",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        fill: false,
        tension: 0.3,
        datalabels: {
          align: "bottom",
          offset: 10,
        },
      },
      {
        label: "bar",
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        tension: 0.3,
        fill: "-1",
        backgroundColor: "rgba(255,193,8,0.5)",
      },
    ],
  },
});

.topParent {
  overflow-x: scroll;
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>

<div class='topParent'>

  <div class="container">
    <div class="row d-flex flex-nowrap">
      <div class="col col-3">
        1 of 7
      </div>
      <div class="col col-3">
        2 of 7
      </div>
      <div class="col col-3">
        3 of 7
      </div>
      <div class="col col-3">
        4 of 7
      </div>
      <div class="col col-3">
        5 of 7
      </div>
      <div class="col col-3">
        6 of 7
      </div>
      <div class="col col-3">
        7 of 7
      </div>
    </div>
    <div class="row">
      <div class="col">
        <canvas id='myChart' height='100px'></canvas>
      </div>
    </div>
  </div>
</div>

Answer 1

问题不在于图表，而在于“n”列行。来自 Boostrap docs（强调我的）：

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

您有七个 col-3 个元素，总共有二十一列。这会导致 row 元素扩展到超过其父元素 container.

的大小

从每个元素中删除 col-3 class 以使 Bootstrap 在父元素 container.

的范围内均匀调整它们的大小

Answer 2

实际上我已经用 Jquery 对它进行了排序。列仍然响应

$('.target').css('width', $('.source')[0].scrollWidth)

https://jsfiddle.net/gabes/tapfjkuh/6/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ['', '', '', '', '', '', '', '', ''],
    datasets: [{
        label: "foo",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        fill: false,
        tension: 0.3,
        datalabels: {
          align: "bottom",
          offset: 10,
        },
      },
      {
        label: "bar",
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
        tension: 0.3,
        fill: "-1",
        backgroundColor: "rgba(255,193,8,0.5)",
      },
    ],
  },
  options: {
            maintainAspectRatio: false,
      }
});

$('.target').css('width', $('.source')[0].scrollWidth)

.topParent {
  
  border: 1px solid red;
}

.container {
  overflow-x: scroll;
  border: 1px solid blue;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.target{
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='topParent'>

  <div class="container">
    <div class="row d-flex flex-nowrap source">
      <div class="col col-3">
        1 of 7
      </div>
      <div class="col col-3">
        2 of 7
      </div>
      <div class="col col-3">
        3 of 7
      </div>
      <div class="col col-3">
        4 of 7
      </div>
      <div class="col col-3">
        5 of 7
      </div>
      <div class="col col-3">
        6 of 7
      </div>
      <div class="col col-3">
        7 of 7
      </div>
    </div>
    <div class="row target">
      <div class="col">
        <canvas id='myChart' height='100px' ></canvas>
      </div>
    </div>
  </div>
</div>

Bootstrap > 水平扩展 ChartJS canvas 以匹配溢出的列

Bootstrap > Extend ChartJS canvas horizontally to match overflowing columns

css

charts

twitter-bootstrap

chart.js

bootstrap-4