同一行中有两个 PrimeNg 图表答案

【问题标题】：Two PrimeNg charts in same row同一行中有两个 PrimeNg 图表
【发布时间】：2021-10-18 07:04:50
【问题描述】：

我在我的 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>

【问题讨论】：

以上代码有什么问题？ class="col-md-6" 没用？请注意，您使用三个s 编写类。不是classs，而是class
是的，没有效果
我在 satckblitz 中尝试了这段代码（使用 class 而不是 classs），一切正常。你确定安装引导程序吗？
是的，愚蠢的错误，我没有注意到错字现在一切正常。您可以写一个答案，这样我就可以将其标记为正确的答案

标签： css angular primeng

【解决方案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

结果：

【讨论】：