Kendo UI 刷新时图表结构混乱

Question

我正在使用 Angular 2 和 Kendo UI 来显示条形图。功能就像提交表单后，根据数据生成一些计算条形图，效果非常好！

结果如下：

一旦用户刷新页面，我就会得到 Kendo 图表结果如下：

重新加载页面后，SVG 元素(g, path) 的属性(Stroke, fill) 具有透明值(rgba(255,255,255,0))。

Kendo图表代码：

             <kendo-chart >
                <kendo-chart-title text="{{ returnObject.designation }} Score card - {{ chartObject.getTotalSum }}% Match" color ="#337ab7" ></kendo-chart-title>
                    <kendo-chart-value-axis>
                        <kendo-chart-value-axis-item [min]="0" [max]="10" >
                        </kendo-chart-value-axis-item>
                        <kendo-chart-series-defaults type="bar">
                            <kendo-chart-series-defaults-labels format="c">
                            </kendo-chart-series-defaults-labels>
                        </kendo-chart-series-defaults>
                    </kendo-chart-value-axis>
                    <kendo-chart-category-axis>
                        <kendo-chart-category-axis-item  [categories]="chartObject.skills">
                        </kendo-chart-category-axis-item>
                    </kendo-chart-category-axis>
                    <kendo-chart-series>
                        <kendo-chart-series-item  type="bar" color="#337ab7" [data]="chartObject.rates">
                        </kendo-chart-series-item>
                    </kendo-chart-series>
                </kendo-chart>

注意：所有JSON数据的结果和KendoUICSS的结果是完美的，但是UI是乱七八糟的，这都是问题与 Kendo UI 图表下的 SVG 元素相关。

Answer 1

我得到了 Kendo UI 的错误！！

<link rel="stylesheet" href="http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik/kendo-theme-default/dist/all.css" />

这是 kendo UI 的样式表，我将其保存在组件级别。所以不知何故它也成为加载 css 和属性的问题。

我将此样式表 link 保留在应用程序级别。我的意思是 index.html。问题解决了！图表运行得非常棒！

Kendo UI 刷新时图表结构混乱

Kendo UI Chart Structure got messed on refresh

svg

kendo-ui

kendo-chart

kendo-ui-angular2

angular