Chartjs - 如何在 x 轴标签上获取最后 7 天？答案

【问题标题】：Chartjs - How to get last 7 days on x-axis labels?Chartjs - 如何在 x 轴标签上获取最后 7 天？
【发布时间】：2019-10-07 09:15:32
【问题描述】：

我试图在我的折线图的 x 轴上获取最后 7 天（使用 chartjs）。最好的方法是什么？

谢谢

【问题讨论】：

标签： javascript jquery time chart.js linechart

【解决方案1】：

您可以使用以下代码实例化过去 7 天的图表：

let start = new Date(),
  end = new Date();

start.setDate(start.getDate() - 7); // set to 'now' minus 7 days.
start.setHours(0, 0, 0, 0); // set to midnight.

new Chart(document.getElementById("chart"), {
  type: "line",
  options: {
    scales: {
      xAxes: [{
        type: "time",
        time: {
          min: start,
          max: end,
          unit: "day"
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

日期算术因为Date object auto correcting itself 在设置月份的值无效时起作用。

您需要将您的值提供为x（或t）和y 属性，as specified in the documentation。

【讨论】：

感谢@timclutton，日期现在按预期显示。我不清楚 x 或 t 值是如何工作的。我还希望将日期匹配的数据库中的数据插入折线图上的日期。我已经通过有效的 AJAX 调用提取了数据；但我如何编码只提取与“所说”日期相关的数据？
@KOF 这是与您的设计相关的另一个问题。但是编写你的服务器端代码来生成你需要的数据。要么有一个只提供图表数据的 URL，要么接受一个输入参数来过滤数据，例如?days=7 或 ?start=20190101&end=20190107.

【解决方案2】：

您必须自己将它们放在轴上。见this。当然，您需要从后端获取 y 轴上的信息。你如何做到这一点取决于你的数据的结构

【讨论】：

【解决方案3】：

您可以通过以下方式获得它：

const dataArray = yourChart.data.datasets[0].data
console.log(dataArray.slice(Math.max(dataArray.length - 7, 1)))

【讨论】：

谢谢。但是当我 console.log 时，我得到的只是'0'的值
我已经这样做了，它可以工作，你能给我你的 chart.js javascript 代码吗？
我还没有放入我的 chart.js 代码。我只是将上面的内容复制并粘贴到我的代码中，console.log 显示为 [0,0,0,0,0]
您是否将“yourChart”重命名为您的图表？当我测试它时，我控制台记录了数据字段中最后 7 个项目的数组，这就是 x 轴
如果您发布一些代码并描述您的数据的样子，就会减少混乱。