css - 同一行中的两个 PrimeNg 图表

Question

我在我的 Angular 应用程序中使用chartModel。

我有两个图表，一个是饼图，另一个是donought我想减小它们的大小并将它们放在同一行，如何做到这一点？

<div class="row">
  <div classs="col-md-6">
   <p-chart type="doughnut" [data]="data"></p-chart>
  </div>
  <div classs="col-md-6">
   <p-chart type="pie" [data]="data2"></p-chart>
  </div>
</div>

Answer 1

首先您需要确保已安装bootstrap。另一件事是你编写了classs(它还有一个s)将其更改为class。

此外，如果您想在小尺寸页面中获得响应更快的页面，您也需要使用 col-sm-6。

<div class="row">
    <div class="col-md-6 col-sm-6">
        <p-chart height="250" type="horizontalBar" [data]="data" [options]="options"></p-chart>
    </div>

    <div class="col-md-6 col-sm-6">
        <p-chart height="250" [responsive]="false" type="horizontalBar" [data]="data" [options]="options"></p-chart>
    </div>
</div>

我为您创建了一个包含两个图表的工作示例:StackBlitzLink

结果: