Я использую Chart.js для рендеринга линейной диаграммы, которая хорошо работает, когда я передаю ему два списка целых чисел для x и y.
Однако я хочу использовать даты для оси x,и документация слишком техническая для меня.Любая помощь приветствуется!
Это то, что я имею до сих пор.Как я уже сказал, это хорошо работает, когда я заменяю {{times}} списком прямых целых чисел.
Переменная {{times}} при печати представляет собой список дат:
['2018-10-21 12:21:05', '2018-10-21 12:21:05', '2018-10-21 12:21:05',
'2018-10-21 12:21:05', '2018-10-21 12:21:05', '2018-10-21 12:21:05',
'2018-10-21 12:21:05', '2018-10-21 12:21:05', '2018-10-21 12:21:06',
'2018-10-21 12:21:06', '2018-10-21 12:21:06']
Переменная {{recoaters}} представляет собой список целых чисел.
Мой template.html, выполняющий скрипт Chart.js:
{% extends 'base.html' %}
{% block head %}
<title>Main Values</title>
{% endblock %}
{% block body %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
<div class ="container">
<canvas id="myChart"></canvas>
</div>
<script>
let recoat_data = {{recoaters}} //y-axis
let recoat_time = {{times}} //x-axis
let myChart = document.getElementById('myChart').getContext('2d');
let valuesChart = new Chart(myChart, {
type: 'line', //bar, horizontalBar, pie, line, doughnut, radar, polarArea
data:{
labels:recoat_time,
datasets: [{
label: 'Recoater Values',
data:recoat_data,
fill: true,
borderColor: "#00f777",
//borderDash: [5, 5],
backgroundColor: "#d3fcff",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#55bae7",
}]
},
options: {
scales: {
xAxes: [{
ticks: {
display: true //removes x axis labels
}
}]
}
}
});
</script>
{% endblock %}
Также стоит упомянуть, что это Djangoактивный шаблон.
Наконец, в качестве крайней меры я хотел преобразовать даты в unix, а затем каким-то образом отобразить метки в удобочитаемых датах.Не уверен, что это возможно.