Блог

Я использую chartjs версии v2.9 для рисования boxplot, и мой код выглядит так:

 function randomValues(count, min, max) {
  const delta = max - min;
  return Array.from({length: count}).map(() => Math.random() * delta   min);
}

const boxplotData = {
  // define label tree
  labels: ['Label 1', 'Label2'],
  datasets: [{
    label: 'Dataset 1',
    backgroundColor: 'rgba(255,0,0,0.5)',
    borderColor: 'red',
    borderWidth: 1,
    outlierColor: '#999999',
    padding: 10,
    itemRadius: 0,
    data: [
[0,0,150,150,150,150,150,150,150,150,150,150,150,150,150],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
    ]
  }]
};
window.onload = () => {
  const ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    type: 'boxplot',
    data: boxplotData,
    options: {
      responsive: true,
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Box Plot Chart'
      },
/*       scales: {
          yAxes: [{
               ticks: {
                     min: -10,
                    max: 100,
                 }
            }]
      } */
    }
  });

}; 

 canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    } 

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/chart.js@2.9.1"></script>
<script src="https://unpkg.com/@sgratzl/chartjs-chart-boxplot"></script>
<div id="container" style="width: 100%;">
  <canvas id="canvas"></canvas>
</div> 

Здесь вы можете видеть на ярлыке 1, что есть выбросы, 0 которые затрудняют их обнаружение. Я готов увеличить метки min и max. В этом случае я мог бы увеличить минимальное и максимальное значение, используя

  scales: {
          yAxes: [{
               ticks: {
                     min: -10,
                    max: 170,
                 }
            }]
      } 
 

Тем не менее, я хочу сделать это динамичным. Есть ли какая-либо встроенная функция или какие-либо другие методы, чтобы я мог динамически добавлять еще 1 шаг, если он находится на грани. Другими словами, я не хочу, чтобы значения достигали min и max по оси y, сохраняя тот же размер шага.

Вот jsfiddle

Обновить:

Как вы можете видеть на графике, шаг равен 20, это означает, что есть 0, 20, 40,….. Теперь я хочу сказать, что если нам нужно увеличить / уменьшить значение, я хочу сделать это в том же соотношении. Здесь, в случае -20, а не -10, и я хочу, чтобы это было динамическим, а не добавлением min — 20.

При отправке данных с сервера вы также можете отправить минимальное и максимальное значение, а затем использовать suggestedMin и suggestedMax

 yAxes: [{
    ticks: {
        suggestedMin: receivedMinVal - 10,
        suggestedMax: receivedMaxVal   10,
        }
    }
}]
 

где received Val относится к значению, отправленному с сервера. Вы также можете использовать функцию js для поиска минимальных и максимальных значений из массива. Предлагаемые значения всегда будут увеличивать значение, сохраняя соотношение stepsize.

Если вы хотите узнать больше об этом, прочитайте документацию. Вы можете прочитать все об этом на https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings