在 Primeng Carousel 中放置 chart.js 圆环图时，画布内的文本似乎有点模糊/扭曲

Posted 2023-03-25

【中文标题】在 Primeng Carousel 中放置 chart.js 圆环图时，画布内的文本似乎有点模糊/扭曲

【英文标题】：While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit

【发布时间】：2020-01-08 03:57:32

【问题描述】：

。我在普通 div 中实现了相同类型的图表，画布大小相同，但文本没有失真。

我尝试将浏览器的缩放大小更改为 >100% 和

 <div class="row" style="padding: 15px;">
    <div class="col-md-12" style="border: 1px solid rgb(228,232,239);" *ngIf="isCardDataloaded">
  <p-carousel [value]="defectsMetricsList" [numVisible]="4" [pageLinks]="4" [responsive]="true">
    <ng-template let-defectMetric pTemplate="item">
      <div class="ui-grid ui-grid-responsive border-style"
        [ngStyle]=" 'background-color': defectMetric.bgColor1 ">
        <!-- <a id="on-click" (click)="onInitClick(defectMetric.name)"> -->
        <div class="ui-grid-row half-padding border-style" [ngStyle]=" 'background-color': defectMetric.bgColor ">
          <div class="ui-grid-col-12 half-margin-top pull-left">
            <span class="font-header-style" style="color: white;">defectMetric.name</span>
          </div>
          <button class="pull-right" style="color: white;" type="button" mat-button mat-icon-button
            (click)="onInitClick(defectMetric.name)">
            <mat-icon>call_made</mat-icon>
          </button>
        </div>
        <div class="ui-grid-row half-padding border-style" [ngStyle]=" 'background-color': defectMetric.bgColor ">
            <div class="ui-grid-col-2"></div>
           <div class="ui-grid-col-8  text-center">
            <canvas    id=" 'myChart' + defectMetric.index "></canvas>
          </div>
          <div class="ui-grid-col-2"></div>

        </div>
        <div class="ui-grid-row half-padding border-style text-centre">

           <div class="ui-grid-col-12  text-center custom-dark-grey" style="font-size: 16px">
           Total issues are defectMetric.Total
          </div>

        </div>

      </div>
    </ng-template>
  </p-carousel>
  </div>
  </div>[![enter image description here][1]][1]

【问题讨论】：

请更正您的标签（提示：点击所有标签并阅读顶部的第一段）

【参考方案1】：

问题是 - 由于轮播中的循环，画布一次又一次地重绘，所以图像看起来有点模糊，我所做的是 ctx = 图表.chart.ctx; ctx.clearRect(0,0,chart.chart.width,chart.chart.height);在 beforeDraw 方法中。