Как установить количество строк в линейном графике на графике. js? - PullRequest
Новая
       11

Как установить количество строк в линейном графике на графике. js?

0 голосов
/ 16 марта 2020

Учитывая метку дат за последние 9 дней и набор данных чисел (2.5,1.5 и c), я хочу, чтобы числа / метки на оси Y были целыми числами от 1-5, в то время как поддержание очков. То, что я пытаюсь сказать, это то, что я хочу иметь фиксированное количество строк в сетке, и я не знаю, как это сделать. Кто-нибудь может мне помочь?

Текущий график:

enter image description here

Ожидаемый график:

ar

1 Ответ

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

Вариант 1/2: с накоплением

Кратчайший путь: 

    yAxes: [{
      stacked: true,
    }]

https://www.chartjs.org/docs/latest/charts/bar.html#stacked -бар-график 

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Data label",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
    data: [5.6,6.7,7.5, 8.6]
  }]
};


var options = {
  responsive: true,
  title: {
    text: 'Hello',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: false,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});
<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

Вариант 2/2: размер шага

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step -размер

Подробнее control ==> установить размер шага (до 1 в вашем примере): 

    yAxes: [{
      stacked: true,
      ticks: {
        stepSize: 1
      }
    }]


/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Data label",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
    data: [5.0,6.7,7.5, 8.6]
  }]
};


var options = {
  responsive: true,
  title: {
    text: 'Hello',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: false,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: false,
      ticks: {
        stepSize: 1
      }
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});
<canvas id="chart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
...