当我最小化屏幕时，顶点图表在角度上没有很好地对齐答案

【问题标题】：When i minimise screen the apex charts was not aligned good in angular当我最小化屏幕时，顶点图表在角度上没有很好地对齐
【发布时间】：2021-11-11 13:58:08
【问题描述】：

我遇到了这个顶点图表的问题，当它全屏时一切都很好，当我最小化屏幕时，图表进入你的卡片，看起来不太好..

app.component.ts：

   export class DashboardComponent implements OnInit{
   riskByCategoryAnalysis: ChartType;
   constructor(){}
   ngOnInit(){
     this.processRiskByCategory(); 
   }

   private processRiskByCategory() {
   this.riskByCategoryAnalysis = {
    series: [this.one, this.two,
      this.three, this.four],
    chart: {
      height: 276,
      type: 'donut',
      width: '100%',

    },
    labels: ["One", "Two", "Three", "Four"],
    plotOptions: {

      pie: {
        donut: {
          size: '75%'
        }
      }
    },

    dataLabels: {
      enabled: false
    },
    legend: {
      show: false,
    },
    colors: ['#0090E7', '#99D3F5', '#1BC59C', '#A4E8D7'],
  };
 }  
 }

app.component.html：

<div class="row" id="apex-chart">
                    <div class="col-md-7 d-flex align-items-center justify-content-center pr-0">
                        <apx-chart dir="ltr" class="apex-charts" *ngIf="riskByCategoryAnalysis"
                                   [series]="riskByCategoryAnalysis.series"
                                   [chart]="riskByCategoryAnalysis.chart"
                                   [legend]="riskByCategoryAnalysis.legend"
                                   [colors]="riskByCategoryAnalysis.colors"
                                   [labels]="riskByCategoryAnalysis.labels"
                                   [dataLabels]="riskByCategoryAnalysis.dataLabels"
                                   [plotOptions]="riskByCategoryAnalysis.plotOptions">
                        </apx-chart>
                    </div>
</div>

谢谢。

【问题讨论】：

能分享一下组件的 HTML 和 CSS 吗？看起来像是 CSS 问题。
我已添加 html，但我没有此图表的任何 css 类。
我已经发布了一个一般性的答案，对于更具体的答案，我需要一个 stackblitz、codepen 或类似的东西来深入研究它。
您能否添加 ChartType 定义。因为这是一个类型问题形式 TS。 ——

标签： angular apexcharts

【解决方案1】：

添加图表的responsive 属性配置可能会解决此问题。

Here你可以看到一个关于如何使用该属性的例子。

在你的情况下，这样的事情应该可以工作。

   responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: "bottom"
            }
          }
        }
      ]

【讨论】：

但响应属性不适用于圆环图
@vidya 我已经编辑了答案，其中包含一个指向圆环图上一个工作示例的链接，当屏幕变小时，该示例会改变图例的宽度和位置。
对象字面量只能指定已知属性，“ChartType”类型中不存在“responsive”。正在显示此错误。
@vidya 你能分享完整的 app.component.ts 吗？您提到的错误看起来像是 ChartType 的类型定义的问题。
我已经添加了更改。请看一下。