Как установить пользовательские значения оси Y (Chart. js v2.8.0) на панели графиков JS - PullRequest
Новая
       6

Как установить пользовательские значения оси Y (Chart. js v2.8.0) на панели графиков JS

1 голос
/ 08 марта 2020

Я хочу настроить столбец диаграммы js Ось Y с разницей в два.

В настоящее время значения оси Y равны 0, 10, 20, 30 Но мне нужно как 0,2 , 4,6,8 ... 30. Мой код ниже 

<script>
$( document ).ready(function() {
    var BarsChart = (function() {
        var $chart = $('#chart-bars');
        function initChart($chart) {
            var ordersChart = new Chart($chart, {
                type: 'bar',
                data: {
                    labels: ["Jan","Feb","Mar","Apr","May"],
                    datasets: [{
                        label: 'Events',
                        data: [0,5,6,0,0],
                        backgroundColor: "#2dce89"
                    }]
                },
                  options: {
                scales: {
                    yAxes: [{
                            display: true,
                            ticks: {
                        beginAtZero: true,
                        stepSize: 2,
                        max: 30
                            }
                        }]
                }
                  }
            });
            $chart.data('chart', ordersChart);
        }
        if ($chart.length) {
            initChart($chart);
        }
})();
});
</script>

1 Ответ

2 голосов
/ 08 марта 2020

Вы можете добавить autoSkip: false к конфигурации yAxis.ticks следующим образом 

ticks: {
  autoSkip: false,

Если autoSkip равно true (по умолчанию), диаграмма. js автоматически рассчитывает количество отображаемых ярлыков и соответственно скрывает ярлыки. Выключите autoSkip, чтобы отобразить все ярлыки независимо от того, что. 

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
    datasets: [{
      label: 'Events',
      data: [0, 5, 6, 0, 0],
      backgroundColor: "#2dce89"
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          autoSkip: false,
          beginAtZero: true,
          stepSize: 2,
          max: 30
        }
      }]
    }
  }
});
canvas {
  max-width: 260px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
...