Структура диаграммы Kendo UI запуталась при обновлении

Я использую Angular 2 и Kendo UI для отображения гистограммы. Функциональность, как после того, как форма представлена, так что в соответствии с данными и некоторые вычисления гистограммы будут сгенерированы и работает как шарм!

Результаты, как показано ниже:

Kendo UI диаграмма хороший выход

После того, как пользователь обновит страницу, Я получаю результат диаграммы кендо, как показано ниже:

Kendo UI диаграмма плохой выход

После перезагрузки страницы атрибуты (Stroke, fill) элемента SVG (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 и CSS Kendo UI подходит идеально, но пользовательский интерфейс грязный, это все проблемы, связанные с элементами SVG под диаграммой Kendo UI.

1 ответ

  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виду. и вопрос решен! Chart работает как шарм!