Могу ли я создать равномерный интервал между неровными точками на графике js? - PullRequest
Новая
       15

Могу ли я создать равномерный интервал между неровными точками на графике js?

0 голосов
/ 24 апреля 2020

При построении графика на графике js с осями y выполняются шаги, подобные 0 573 675 900. Когда я строю график, расстояние между соседними точками составляет. я могу привести точки равномерно?

Рассмотрим изображение

график

На этом изображении я хочу, чтобы число 7 отображалось точно посередине и график в масштабе от 1 до 7, а также от 7 до 10.

Ниже приведен пример кода, над которым я работаю:

///////////// ///////////////////////////////////////////// 

document.addEventListener("DOMContentLoaded", function() {

  var
    example = document.getElementById('example1'),
    hot;

  var headers = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Pink", 'Brown'];
  var myData = [
    [5, 10, 3, 5, 2, 3, 5, 1],
    [9, 9, 3, 10, 8, 7, 7, 2],
    [5, 1, 10, 6, 7, 9, 4, 8]
  ];
  var StepValues = [1,7,10];
  var rowheaders = ['Mark', 'Anna', 'Diana']

  hot = new Handsontable(example, {
    data: myData,
    rowHeaders: rowheaders,
    colHeaders: headers,
    readOnly: true,
    colWidths: 88,
    licenseKey: 'non-commercial-and-evaluation',
    fillHandle: {
      autoInsertRow: false,
    }
  });


  var options = {
    type: 'bar',
    data: {
      labels: headers,
      datasets: [{
        label: rowheaders[0],
        data: myData[0],
        borderWidth: 1,
        backgroundColor: 'rgb(255, 236, 217)'
      }, {
        label: rowheaders[1],
        data: myData[1],
        borderWidth: 1,
        backgroundColor: 'rgb(235, 224, 255)'
      }, {
        label: rowheaders[2],
        data: myData[2],
        borderWidth: 1,
        backgroundColor: 'rgb(219, 242, 242)'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            reverse: false,
            callback: (label) =>{
            if(StepValues.includes(label)){
            return label;
            }
            }
          }
        }]
      }
    }
  }

  var ctx = document.querySelector('.chartJSContainer').getContext('2d');
  var myChart = new Chart(ctx, options);

});

//////////////////////////////////////////////// //////////////////

...