Как включить горизонтальную прокрутку для chart.js в Ionic - PullRequest
Новая
       14

Как включить горизонтальную прокрутку для chart.js в Ionic

0 голосов
/ 29 июня 2018

Я использую Chart.js версии 2.7.2 в моем ионном приложении для отображения гистограммы.

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

Вот что у меня есть:

Current UI

Вот как мне это нужно:

enter image description here.

Как вы можете видеть, если существует более 5 данных, он должен отображать на экране максимум 5 полос, а остальные должны прокручиваться вдоль оси x.

Я публикую соответствующие части моего кода ниже:

HTML: 

<ion-content scroll="false" text-center>
  <ion-grid>
   <ion-row class="graph-section">

    <canvas height="250%" #barCanvas></canvas>

   </ion-row>
</ion-grid>

CSS: 

.graph-section{
        display:block;
       height: 100%;
      width: 100%;
      }

      ion-grid {
        height: 100%;
      }

.ts Файл: 

barChart: any;

 ionViewDidLoad() 
    {

        this.barChart = new Chart(this.barCanvas.nativeElement, 
            {

                chart:{'xAxisName' : "Quarter"},
            type: 'bar',
            data: {
                labels: ["5d", "2d", "1d ", "2h", "5min"],
                datasets: [{
                    label: '',
                    data: [1, 2, 1, 2, 3],
                    backgroundColor: [
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',

                    ],
                    borderColor: [
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',
                        'rgba(165, 217, 238)',

                    ],
                    borderWidth: 1
                }]
            },
            options:  {
                scales: {
                    yAxes: [{ 
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }

        });

  }
...