Как контролировать перекрытие значений оси Y в Chart. js, когда больше записей вставлено с использованием PHP? - PullRequest
Новая
       5

Как контролировать перекрытие значений оси Y в Chart. js, когда больше записей вставлено с использованием PHP?

0 голосов
/ 07 мая 2020

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

PHP КОД 

<div class="panel-body" id="chart_dist_tokens">
    <div class=" col-md-12">
        <div id="ticketsGraph" style="width:auto; height:275px;">
            <canvas id="barGraphForTickets"></canvas>
        </div>
    </div>
</div>

JS КОД 

var chartdata = {
   datasets: datasetValues,
   labels: formatDates
};

var myPieChart = new Chart(graphTarget,{
    type: 'bar',
    data: chartdata,
    options:{
        maintainAspectRatio:false,
        responsive:true,
        scales: {
           yAxes: [{
              ticks: {
                  stepSize: 1
              }
           }]
        }
    }
});

Ниже приведено изображение получаемого графика.

enter image description here

Есть ли альтернатива для решения этой проблемы с использованием javascript или это связано с неправильным использованием кода графика?

1 Ответ

0 голосов
/ 08 мая 2020

По умолчанию Chart. js автоматически вычисляет, сколько меток может быть показано, и соответственно скрывает метки. Это контролируется ticks.autoSkip, который имеет значение по умолчанию true.

Однако, если вы явно определяете yAxes.ticks.stepSize, autoSkip игнорируется, и для всех совпадающих шагов отображается галочка .

Решение 1

Самое простое решение - удалить yAxis.ticks из параметров и позволить autoSkip управлять генерацией тиков.

Решение 2

Вы также можете увеличить stepSize и выбрать то, что вам подходит. 

yAxes: [{
  ticks: {
    stepSize: 10
  }
}]

Решение 3

Другой вариант - определить точное количество отображаемых тиков с помощью yAxes.ticks.maxTicksLimit. 

yAxes: [{
  ticks: {
    maxTicksLimit: 5
  }
}]
...