0

棒グラフを表示するために Angular 2 と Kendo UI を使用しています。機能は、データごとにフォームが送信されると似ており、いくつかの計算棒グラフが生成され、魅力のように機能します!

結果は次のようになります。

剣道UIチャートの良い出力

ユーザーがページを更新すると、以下のような剣道チャートの結果が得られます。

剣道UIチャートの出力不良

ページをリロードした後、透明な値 ( ) を持つStroke, fillSVG 要素 ( ) の属性 ( )。g, pathrgba(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 データと剣道 UI CSS の結果は完璧ですが、UI が乱雑です。これはすべて、剣道 UI チャートの下の SVG 要素に関連しています。

4

1 に答える 1

0

剣道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ます。そして問題は解決しました！チャートは魔法のように機能しています！

于 2016-10-06T14:55:33.747 に答える