Kendo Angular Стиль Donut Chart переключается случайным образом - PullRequest
Новая
       17

Kendo Angular Стиль Donut Chart переключается случайным образом

0 голосов
/ 06 апреля 2020

В настоящее время я работаю над кольцевой диаграммой пользовательского интерфейса Kendo в проекте Angular. Диаграмма отлично работает функционально, но стилизация диаграммы доставляет мне некоторые затруднения.

В настоящее время диаграмма продолжает переключаться между двумя видами стилей.

Это первый: Предпочтительный стиль

Это второй вариант: Неподходящий стиль

Кажется, что они меняются случайным образом при каждой перезагрузке, даже когда ничего в код изменен Я часами пытался найти решение, но, похоже, ничего не получалось.

Вот код для диаграммы: 

 <div *ngIf="isDonutEnabled && pieGraphData">
    <kendo-chart class="travelbehaviour-graph-donut-spacing">
      <kendo-chart-legend [visible]='false' position="bottom" orientation="horizontal"></kendo-chart-legend>
      <ng-template kendoChartDonutCenterTemplate>
        <span class="travelbehaviour-graph-donut-center-subtext">CO₂ Uitstoot</span>
        <span class="travelbehaviour-graph-donut-center-bigtext">{{pieGraphData.co2}}</span>
        <span class="travelbehaviour-graph-donut-center-subtext">g/km</span>
      </ng-template>
      <kendo-chart-series>
        <kendo-chart-series-item *ngIf="includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
          [holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionIncluding">
          <kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
        <kendo-chart-series-item *ngIf="!includingFlights" [autoFit]=true type="donut" [data]="pieGraphData.pieGraph"
          [holeSize]="150" [size]="200" [labels]="donutLabels" categoryField="name" field="contributionExcluding">
          <kendo-chart-series-item-labels position="outsideEnd" color="#000" [content]='getLabel'>
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  </div>

Вот соответствующий CSS: 

.travelbehaviour-graph-donut-spacing {
    height: 50vh;
    width: 50vw;
    margin: 0 auto;
}

.travelbehaviour-graph-donut-center-bigtext {
  font-family: PublicaSansMedium;
  font-size: 50px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #333333;
}

.travelbehaviour-graph-donut-center-subtext {
  font-family: PublicaSansMedium;
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: #333333;
}

Я уже пытался использовать ViewEncapsulation.None, который не работал. Я также попытался изменить CSS графика, но это тоже не сработало.

Переменные * ngIf являются логическим значением и объектом данных, используемым для загрузки данных в график.

До сих пор я нашел очень мало относительно этой проблемы и задавался вопросом, может ли кто-нибудь помочь мне с этой проблемой - это будет очень цениться!

РЕДАКТИРОВАТЬ: Стоит отметить, что это также происходит с другим графиком в Мой проект на той же странице: столбчатая диаграмма с накоплением. Это имеет точно такую ​​же проблему, как описано выше.

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Проблема выглядит случайной, но это не так. Я предполагаю, что вы используете Google Chrome, потому что мы также столкнулись с проблемой.

Проблема в том, что диаграмма отображается перед загрузкой файла css. Это происходит в Chrome, потому что js файлы кэшируются в памяти, а css файлы кэшируются на диске.

Наш текущий обходной путь состоит в том, чтобы визуализировать диаграмму после загрузки всех данных (требуется в основном дольше, чем 1 секунда для загрузки данных с сервера).

Возможно, это неудовлетворительное решение, но я надеюсь, что вам удалось немного лучше понять проблему.

Мы также открыли Билет Kendo, и я сообщу вам, как только мы найдем лучшее решение.

РЕДАКТИРОВАТЬ:
Служба поддержки Kendo ответила, что они не знали об этой проблеме, но в настоящее время внедряют решение. Для шрифтов они рекомендуют устанавливать шрифт с помощью свойства font меток соответствующего элемента Chart. Они также открыли запрос функции , поэтому установите шрифт глобально.

0 голосов
/ 06 апреля 2020

Я закрываю этот вопрос, так как я нашел решение для моей проблемы. Видимо, внешний вид стекла - это функция стилевого оформления, которую можно включать или выключать, а также другие параметры. Больше можно найти здесь: https://www.telerik.com/kendo-angular-ui/components/charts/api/Overlay/

Это должно быть установлено для каждого соответствующего элемента серии, чтобы он работал.

...