Столбцы гистограммы ng2-charts (chart. js) не отображаются выше определенной ширины - PullRequest
Новая
       153

Столбцы гистограммы ng2-charts (chart. js) не отображаются выше определенной ширины

1 голос
/ 07 августа 2020

Во-первых, проблема возникает в проекте Angular 8, использующем библиотеку ng2-charts (https://valor-software.com/ng2-charts/), насколько мне известно, этот проект является оболочкой для диаграммы. js.

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

enter image description here

I have a tooltip set up for the columns, the tooltip shows up when I hover where the column should be, meaning the column is actually there, we just can't see it. The issue is not that the value is so much smaller than the previous one either, the columns are ordered based on their values and the height of the first invisible column should be around the same as the previous one.

The dataset doesn't seem to be the cause of the issue either. I reordered my data based on the names instead of the values and even then, only the first 183 columns showed up.

My HTML:

Ширина оболочки (и диаграммы) зависит от количества столбцов, которые я хочу показать. Если я уменьшу множитель с 35 пикселей до, скажем, 20, тогда внезапно будут отображаться все (в настоящее время) 300 столбцов, но сама диаграмма выглядит не так хорошо. Если я установлю 25, то последние несколько столбцов все равно не появятся. Поскольку количество столбцов, которые я хочу показать позже, увеличится, установка ширины, которая работает только сейчас, для меня неприемлема.

Конфигурация диаграммы: 

this.barChartOptions = {
  animation: {
     duration: 0
  },
  hover: {
     animationDuration: 0
  },
  responsiveAnimationDuration: 0, // animation duration after a resize
  responsive: true,
  maintainAspectRatio: false
}

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

Изменить: доступен пример StackBlitz: https://stackblitz.com/edit/angular-wrvgme

...