在列中添加条形图

Question

labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  chartData = [
    {
      label: 'Doctors',
      data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30, 40],
      backgroundColor: 'rgb(81, 193, 190)',
    },
    {
      label: 'Clinics',
      data: [20, 30, 40, 50, 40, 30, 20, 10, 20, 30, 40, 50],
      backgroundColor: 'rgb(46, 135, 203)',
    },
    {
      label: 'Hospitals',
      data: [30, 40, 50, 40, 30, 20, 10, 20, 30, 40, 50, 40],
      backgroundColor: 'rgb(209, 174, 200)',
    },
    {
      label: 'Pathology/Diagnosis',
      data: [40, 50, 40, 30, 20, 10, 20, 30, 40, 50, 40, 30],
      backgroundColor: 'rgb(103, 48, 121)',
    }
  ];

ngOnInit() {
    this.showChart();
}

showChart() {
    //var ctx = document.getElementById('barCanvas');
    const canvas = <HTMLCanvasElement> document.getElementById('barCanvas');
    const ctx = canvas.getContext('2d');
    this.barChart = new Chart(ctx, {

      type: 'bar',
      data: {
        labels: this.labels,
        datasets: this.chartData
      },
      options: {
        responsive: true,
        //maintainAspectRatio: false
      }
    });

    this.barChart.reDraw();
  }

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: #ff80bf;
  flex-wrap: wrap;
}

.child-div {
  background-color: #6600cc;
  width: 100px;
  margin: 10px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 30px;
}

.chart-container {
  position: relative !important;
  width: 100%;
  height: 100%;
  // display: block !important;

  canvas {
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
  }
}


.row {
  display: block;
  // border: 1px solid red;
}
.col-12{
  display: inline-block;
  width: 100%;
}
.col-9{
  display: inline-block;
  width: 75%;
}
.col-3{
  display: inline-block;
  width: 25%;
}
.p1{
  padding: 1em 1em;
}

<div class='row'>
  <div class='col-9'>
     <div class="chart-container">
      <canvas id="barCanvas"></canvas>
     </div>   
  </div>
  <div class='col-3 p1'>
    <div>
      <div class="flex-container">
        <div class="title">Dummy Heading</div>
        <div class="child-div">1</div>
        <div class="child-div">2</div>
        <div class="child-div">3</div>  
      </div>
    </div>
  </div>
</div>

我正在尝试使用chart.js 和一些相关数据在一行的 2 列中添加图表。如他们的官方文档here 中所述，我以编程方式实现了条形图。 我制作了一个“行”类和 2 个宽度分别为 75% 和 25% 的列。我想用图表填充 75% 的列，其余的 25% 用一些数据填充。但是 div（如第一张带有 1,2,3 编号框的粉红色图像所示）确实出现在与图表相同的高度。相反，它位于图表下方，如第二张图片所示。我发现了这个问题。根据官方文档，图表画布的父 div 应该具有我所做的相对位置。但是chart.js库添加了一个类名为chartjs-size-monitor的动态div作为canvas的父div。这个 div 的样式位置是绝对的，这导致我的右侧数据 div 向下移动。如果我取消选中该位置样式，则 div 会向上移动，如图 1 所示。有人可以帮我解决这个问题吗？谢谢。

.

Answer 1

1. 看起来粉红色的区域比里面的任何盒子都大。可能您应该将 col-9 col-3 更改为 col-10 col-2
2. 您可以创建一个与您在 Google 开发控制台上检查的完全一样的 css 类，并在其中仅添加 position:relative !important
3. 您可以减少 child-div 中的边距，并使用百分比而不是像素来设置相对宽度

这些是我可以建议的第一个解决方案。但我不是前端开发者！我认为会有更好的解决方案。