我目前正在Angular项目中研究Kendo UI甜甜圈图。该图表在功能上运行良好，但是该图表的样式给我带来了一些麻烦。
现在，图表不断在两种样式之间切换。
这是第一个：Preferred styling
这是第二个：Non-preferred styling
即使重新加载代码，这些似乎也会在我重新加载时随机改变。我已经尝试了数小时的解决方案，但似乎无法解决任何问题。
这里是图表的代码：
<div *ngIf="isDonutEnabled && pieGraphData">
<kendo-chart class="travelbehaviour-graph-donut-spacing">
<kendo-chart-legend [visible]='false' position="bottom" orientation="horizontal"></kendo-chart-legend>
<ng-template kendoChartDonutCenterTemplate>
<span class="travelbehaviour-graph-donut-center-subtext">CO₂ Uitstoot</span>
<span class="travelbehaviour-graph-donut-center-bigtext">{{pieGraphData.co2}}</span>
<span class="travelbehaviour-graph-donut-center-subtext">g/km</span>
</ng-template>
<kendo-chart-series>
<kendo-chart-series-item *ngIf="includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionIncluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
<kendo-chart-series-item *ngIf="!includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
[holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionExcluding">
<kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
</div>
这里是相关的CSS：
.travelbehaviour-graph-donut-spacing {
height: 50vh;
width: 50vw;
margin: 0 auto;
}
.travelbehaviour-graph-donut-center-bigtext {
font-family: PublicaSansMedium;
font-size: 50px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
.travelbehaviour-graph-donut-center-subtext {
font-family: PublicaSansMedium;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #333333;
}
我已经尝试使用ViewEncapsulation.None，但是没有用。我也尝试过更改图形的CSS，但这也不起作用。
* ngIf变量是一个布尔值，是一个用于将数据加载到图形中的数据对象。
到目前为止，我对这个问题的了解很少，并且想知道是否有人可以帮助我解决这个问题，将不胜感激！
编辑：值得注意的是，这也发生在我项目的同一页上的另一个图表上：堆积的柱形图。这与上述问题完全相同。
由于我找到了解决问题的方法，因此我正在关闭此问题。显然，玻璃外观是一种可以打开或关闭的样式功能，还包括其他设置。可以在这里找到更多信息：https://www.telerik.com/kendo-angular-ui/components/charts/api/Overlay/
为了工作，必须为每个相关的系列项目都设置这个。
问题看起来像是随机的，但不是。我认为您使用的是Google Chrome浏览器，因为我们也遇到了问题。
问题在于，图表是在加载CSS文件之前呈现的。在Chrome中发生这种情况是因为js文件缓存在内存中，而CSS文件缓存在磁盘上。
我们当前的解决方法是在加载所有数据后呈现图表（从服务器加载数据通常需要1秒以上的时间。）>
这可能不是令人满意的解决方案，但我希望您能够更好地理解该问题。
我们还开了剑道门票，一旦我们找到更好的解决方案，我会尽快通知您。
编辑：Kendo支持人员答复说他们不知道此问题，但是他们目前正在实施解决方案。对于字体，他们建议应通过适当的Chart元素的标签的font属性设置字体。他们还打开了feature request，因此请全局设置字体。