Как добавить горизонтальную прокрутку для гистограммы в chartjs в angular7? - PullRequest
Новая
       16

Как добавить горизонтальную прокрутку для гистограммы в chartjs в angular7?

0 голосов
/ 08 апреля 2019

Я использую версию chartjs 2.8.0 в своем приложении angular7. В свой шаблон компонентов я добавил гистограмму диаграмм в следующем формате. 

<div class="row">
 <div class="col-12" style="width: 100%; overflow-x: auto;">
  <canvas [hidden]="listView" id="barChart" height="100"></canvas>
 </div>
 </div>

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

 this.barChart = new Chart('barChart', {
      type: 'bar',
      data: {
        labels: [],
        datasets: [
          {
            data: [],
            backgroundColor: [],
            borderColor: [],
            borderWidth: 1
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'No Data Found',
          fontSize: 18
        },
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: false,
              color: 'grey',
              drawBorder: true
            }
          }],
          yAxes: [{
            gridLines: {
              display: false,
              color: 'grey',
              drawBorder: true
            },
            ticks: {
              beginAtZero: true,
              fontColor: '#000',
            }
          }]
        },
        hover: {
          animationDuration: 0
        },
        animation: {
          duration: 1,
          onComplete: function () {
            console.log('this', this);
            const chartInstance = this.chart;
            const ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,
              Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            this.data.datasets.forEach(function (dataset, i) {
              const meta = chartInstance.controller.getDatasetMeta(i);
              meta.data.forEach(function (bar, index) {
                const data = dataset.data[index];
                console.log('bar', data);
                ctx.fillStyle = '#000';
                ctx.fontStyle = 'bold';
                ctx.font = 'bold ' + bar._model.height / 2 + 'px Arial';
                ctx.fillText('100%', bar._model.x, bar._model.y + 20);
                ctx.fillText(data.billaBle === 1 ? 'Billable' : 'Non Billable', bar._model.x, bar._model.y + 35);
              });
            });
          }
        },
      }
    });
  }
...