时间戳

首页 > 解决方案 > 一个 flexbox 容器中的两个饼图

flexbox - 一个 flexbox 容器中的两个饼图

问题描述

我正在设计一个仪表板，我想在其中将两个饼图放在一个 flexbox 容器中......它显示第二个，一个隐藏，有时当我将鼠标悬停在第二个上时，第一个出现在第二个的顶部.. . 我的代码 

<section id="pie-charts">
 <canvas id="trans-status-chart" width="400" height="300"></canvas>
 <canvas id="targeted-gender-chart" width="400" height="300"></canvas>
</section>

我的CSS： 

#pie-charts{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#trans-status-chart{
    width: 45% !important;
    height: auto !important;
}
#targeted-gender-chart{
    width: 45% !important;
    height: auto !important;
}

标签： flexboxchart.js

解决方案

Chart.js 需要一个“独占”的父元素来确保它可以正确调整自身大小。这实际上意味着您需要将所有canvas元素包装在相对定位的div.

这是一个例子：

new Chart(document.getElementById('trans-status-chart'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [43, 20, 44]
    }]
  },
  options: {}
});

new Chart(document.getElementById('targeted-gender-chart'), {
  type: 'pie',
  data: {
    datasets: [{
      data: [55, 82, 32]
    }]
  },
  options: {}
});
#pie-charts {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pie-charts>div {
  width: 45% !important;
  height: auto !important;
  position: relative;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<section id="pie-charts">
  <div><canvas id="trans-status-chart" width="400" height="300"></canvas></div>
  <div><canvas id="targeted-gender-chart" width="400" height="300"></canvas></div>
</section>

推荐阅读