Как сделать диаграмму NG-2 прокручиваемой

Question

Я использую ng2-диаграмму для отображения от 500 до 1000 данных. проблема в том, что мне нужно исправить с диаграммы, есть ли способ сделать прокручиваемую диаграмму ng-2?

Я попытался обернуть диаграмму внутри родительского div и дать ширину 100% и overflow-x: прокрутите до диаграммы div, но она не работает

Answer 1

Вы можете сделать элемент <canvas baseChart> из ng2-диаграмм с возможностью прокрутки с помощью двойного переноса .

Пример HTML:

<div class="myChartWrapper">
  <div class="myChart">
    <canvas baseChart 
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [plugins]="barChartPlugins"
      [legend]="barChartLegend"
      [chartType]="barChartType">
    </canvas>
  </div>

</div>

Пример CSS:

.myChart{
  height: 500px;
  width: 1000px;
}

.myChartWrapper{
  width: 500px;
  overflow-x: scroll;
}

Внутренняя оболочка <div class="myChart"> определяет фактическую ширину диаграммы. Внешняя оболочка <div class="myChartWrapper"> определяет ширину оболочки, которую вы хотите на самом деле представить пользователям.

Пример Stackblitz ??

Надеюсь, это поможет!