同一行中的两个 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

结果：

同一行中的两个 PrimeNg 图表

Two PrimeNg charts in same row

css

primeng

angular