在列中添加条形图

如何解决在列中添加条形图

labels = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
  chartData = [
    {
      label: 'Doctors',data: [10,20,30,40,50,10,40],backgroundColor: 'rgb(81,193,190)',},{
      label: 'Clinics',data: [20,50],backgroundColor: 'rgb(46,135,203)',{
      label: 'Hospitals',data: [30,backgroundColor: 'rgb(209,174,200)',{
      label: 'Pathology/Diagnosis',data: [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作为画布的父div添加。该div具有绝对的样式位置，这导致我的右侧数据div向下移动。如果取消选中该位置样式，则div会如图1所示向上移动。有人可以帮助我解决此问题吗？谢谢。

。

解决方法

似乎粉红色的区域大于其中的所有框。也许您应该将col-9 col-3更改为col-10 col-2
您可以创建与您在Google开发人员控制台上检查的CSS类完全相同的css类，并在其中仅添加position：relative！important
您可以减少child-div中的边距，并使用百分比而不是像素来设置相对宽度

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

在列中添加条形图

如何解决在列中添加条形图

解决方法

相关推荐