Question

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

结果如下：

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

重新加载页面后，SVG元素（Stroke, fill）的属性（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元素有关。

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和属性而产生的问题。

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

剑道UI图表结构在刷新

1 个答案: