0

我正在使用 Angular 2 和 Kendo UI 来显示条形图。功能就像一旦提交表单，就会根据数据生成一些计算条形图，就像一个魅力！

结果如下：

剑道 UI 图表良好的输出

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

Kendo UI 图表错误输出

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

剑道图代码：

             <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 数据和 Kendo UI CSS 的结果正在完善，但 UI 很乱，这所有问题都与 Kendo UI 图表下的 SVG 元素有关。

4

1 回答 1

0

我得到了剑道用户界面的错误！

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

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

我将此样式表链接保留在应用程序级别。我的意思是在index.html. 问题解决了！图表就像一个魅力！

于 2016-10-06T14:55:33.747 回答