ChartJS 使用列计数时画布拉伸

owfi6suc 于 2023-02-16 发布在 Chart.js

关注(0)|答案(1)|浏览(201)

我正在使用chart.js，我有两个饼图和一个条形图，我希望它们显示在一行中。我希望条形图比单独的饼图大，所以我做了以下操作。
为了使两个饼图适合一个列，我使用了column-count。
这是我使用的CSS

.container {
    display: flex;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 30px;
}
.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    align-self: stretch;
    margin-right: 10px;
    margin-left: 10px;
}
.container div {
    flex: 1;
}
canvas {
    max-width: 100%;
    display: flex;
}
.pie {
    column-count: 2;
    max-height: 93%;
}

而HTML

<div class="container">
    <div class="row">
        <div class="pie">
            <canvas baseChart [data]="pieFeeChartData" [type]="pieChartType"
                [options]="pieFeeChartOptions">
            </canvas>
            <canvas baseChart [data]="pieFooChartData" [type]="pieChartType"
                [options]="pieFooChartOptions">
            </canvas>
        </div>
        <div class="column">
            <canvas baseChart [data]="barBlahChartData"
                [options]="barBlahChartOptions" [type]="barChartType">
            </canvas>
        </div>
    </div>
</div>

我最好的解决方案是将.pie中的max-height设置为93%。它确实给予了我接近我想要的，但它不精确，格式与较小的窗口大小不一致。它还不错，但我希望找到一个更精确的解决方案，而不使用硬编码值。我已经尝试了很多不同的Flex设置，但我希望在整个项目中尽可能地保持这些CSS设置的一致性，所以这也不是理想的。
下面是当我不设置max-height: 93%;时发生的情况的屏幕截图

chart.js

来源：https://stackoverflow.com/questions/75440697/canvas-stretching-when-using-column-count

1条答案

按热度按时间

dluptydi1#

使用网格可以大大简化这一过程，它会给你更多可预测的结果，在你的项目中更容易重用，而且随着项目的增长，推理也会容易得多。
另外，请注意canvas高度值如何使用!important覆盖Chart.js作为内联样式应用的图表高度的固定值。

.container {
  width: 90%;
  margin: auto;
}
.row {
  display: grid;
  /* 
    A standard 12 column grid can be evenly 
    divided into quarters and thirds.
  */
  grid-template-columns: repeat(12, 1fr);
}
.col-full {
  grid-column: span 12;
}
.col-half {
  grid-column: span 6;
}
.col-quarter {
  grid-column: span 3;
}
/* ✨ Magic ✨ */
canvas {
  max-width: 100%;
  height: 100% !important;
}

现在是HTML：

<div class="container">
  <div class="row">
    <div class="col-quarter">
      <canvas id="pieChart1"></canvas>
    </div>
    <div class="col-quarter">
      <canvas id="pieChart2"></canvas>
    </div>
    <div class="col-half">
      <canvas id="barChart"></canvas>
    </div>
  </div>
</div>

结果：

展开查看全部

赞(0）回复(0）举报 2023-02-16

我来回答

ChartJS 使用列计数时画布拉伸

1条答案

相关问题

热门标签

最新问答