javascript - 当 X 轴为时间时，堆积折线图无法正确显示

Question

我尝试制作一个以时间为 X 轴的堆积折线图。 问题是“堆栈”部分似乎是在每个系列的开头累积的:

https://codesandbox.io/s/chartjs-idbzk?file=/src/index.js

我正在使用带有vue的chartjs。我使用“vue-chartjs”:“^ 3.5.0”，“chart.js”:“^ 2.9.3”，“vue”:“^ 2.6.11”，“vuetify”:“^ 2.2.11”

我做错了什么？ 提前非常感谢

Answer 1

查看您的代码，我发现一些建议您更改的内容:

• 使用 data.labels 属性定义 xAxes 值:

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
       new Date("2020-07-01T00:00:00.000Z").toLocaleDateString(),
       ...
       ...
       new Date("2020-07-31T00:00:00.000Z").toLocaleDateString()

您应该定义 xAxes 的从 min 到 max 值的所有标签。 如果您想格式化日期，您可以使用可用的 native 日期格式方法(如我用作示例的方法)，甚至使用像 moment.js 这样的库来管理格式: Moment.js Documentation

现在取决于您想要的输出图表:

堆叠 y 轴

• 您可以从 options.scales 中删除以下 xAxes block :

xAxes: [{
   type: 'time',
   time: {
      unit: 'day'
   },
   distribution: 'series',
   offset: true,
   ticks: {
      major: {
         enabled: true,
         fontStyle: 'bold'
      },
      source: 'data',
      autoSkip: true,
      autoSkipPadding: 75,
      maxRotation: 0,
      sampleSize: 100
   }
}]

那么你的输出应该是一个正确的yAxes堆叠折线图，如下所示:

注意:xAxes 仅显示两个值，因为我只在 data.labels 上添加了这些值，但正如我之前提到的，您应该添加那里的所有值。

堆叠 xAxes

• 您可以从 option.scales 中删除以下 yAxes block :

yAxes: [{
   stacked: false
}]

那么你的输出应该是这样的图表: