Как контролировать время тиков в Chart.js?
У меня возникла другая проблема с конфигурацией chart.js: я хочу ограничить тики, которые появляются на временной оси (x), но, похоже, не могут. У меня есть функция, которая позволяет пользователю изменять единицу времени с "часа" на "неделю" на "месяц" и т. Д., Но если я выберу "час", дисплей заполнится крошечными линиями, и если я выберу опцию где-нибудь выше 'месяц' галочки не отображаются.
Я могу отчасти контролировать то, что отображается, указав разные unitStepSize для каждой опции, но это не дает того, что я хочу: например, если я задаю unit: 'hour', unitStepSize: 25 вместо отображения всех часов дня с 12:00 до 15:00. 12:00 это просто показывает кучу тиков, которые показывают текущее время с 24-часовыми интервалами. Попытка настроить скрипку, но она не загружает внешние ресурсы по какой-то причине. КОД!
JavaScript:
// Fetch date via moment.js
function newDate(days)
{
return moment().add(days, 'd');
};
var config =
{
type: 'line',
data:
{
// Use fetched date to track progress over time.
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
// Feed data to chart.
datasets:
[{
label: "Strength",
data: [2, 3, 4, 2, 1, 4],
backgroundColor: 'rgba(0, 0, 255, 0)',
borderColor: 'rgba(0, 0, 255, 1)',
borderWidth: 1.5
},
{
label: "Cardio",
data: [1, 3, 2, 3, 3],
backgroundColor: 'rgba(255, 0, 0, 0)',
borderColor: 'rgba(200, 0, 0, 1)',
borderWidth: 1.5
}]
},
// Configure axis.
options:
{
chartArea:
{
backgroundColor: '#ffffff',
},
scales:
{
xAxes:
[{
/*ticks: //This does not seem to work at all.
{
max: 4,
min: 0,
stepSize: 1
},*/
type: 'time',
time:
{
unit: 'week',
unitStepSize: 1,
displayFormats:
{
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'year': 'MMM DD'
}
},
gridLines:
{
lineWidth: 1.5
}
}],
yAxes:
[{
ticks:
{
max: 4,
min: 4,
stepSize: 1
},
gridLines:
{
color: ['red', 'green', 'blue', 'green', 'red'],
lineWidth: 1.5
}
}]
},
}
};
// Create chart with previously determined configurations.
var ctx = document.getElementById("theChart").getContext("2d");
new Chart(ctx, config);
HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
</head>
<body>
<canvas id="theChart" width="400" height="400"></canvas>
</body>
</html>