#javascript #jquery #chart.js
#javascript #jquery #chart.js
Вопрос:
Я использую 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.
Ответ №1:
При отправке данных с сервера вы также можете отправить минимальное и максимальное значение, а затем использовать 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