Question

我正在使用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，然后以某种人类可读的日期显示标签。不知道这是否可能。

将时间用作Chart.js的X轴

0 个答案: