Javascript 当Xaxis为时间时，堆叠折线图未正确显示

我试着做一个以时间为Xaxis的堆积折线图。 问题是“堆栈”部分似乎在每个系列的开头累积：

我将chartjs与vue一起使用。我使用“vue chartjs”：“^3.5.0”，“chart.js”：“^2.9.3”，“vue”：“^2.6.11”，“vuetify”：“^2.2.11”

我做错了什么？

---

非常感谢您查看您的代码我看到了一些建议您更改的内容：

• 使用

  data.labels

  属性定义xAxes值：

var myChart=新图表（ctx、{
键入：“行”，
数据：{
标签：[
新日期（“2020-07-01T00:00:00.000Z”）。toLocaleDateString（），
...
...
新日期（“2020-07-31T00:00:00.000Z”）。toLocaleDateString（）

您应该定义从XAX的最小值到最大值的所有标签。 如果您想格式化日期，可以使用可用的本机日期格式化方法（例如我使用的方法），甚至可以使用像矩.js这样的库来管理格式化：

现在，根据您想要的输出图表：

堆叠雅克斯

• 您可以从

  选项中删除以下xAxes块。缩放

  ：

xAxes:[{
键入：“时间”，
时间：{
单位：'天'
},
分布：'系列'，
对,，
滴答声：{
主修：{
启用：对，
字体：“粗体”
},
资料来源：“数据”，
autoSkip：是的，
autoSkipPadding:75，
最大旋转：0，
样本数量：100
}
}]

那么您的输出应该是一个适当的yAxes堆叠折线图，如下所示：

注意：XAX只显示两个值，因为我只在

data.labels

上添加了这些值，但正如我前面提到的，您应该在那里添加所有值

堆叠XAX

• 您可以从

  选项中删除以下yAxes块。缩放

  ：

yax：[{
错误：错误
}]

那么您的输出应该是这样的图表：

---

我认为您没有做错什么，但是怀疑当前稳定版本的Chart.js（2.9.3）是否能够处理这种情况（参见此）。显然，堆叠是在不同数据集中具有相同索引的值上进行的，并且忽略了

x

值（时间）

好消息是，它似乎可以像人们所期望的那样呈现这样的图表。但是问题是，vue chartjs包装器可能还不能与Chart.js 3.0一起使用。因此，您必须在项目中直接使用Chart.js库

请在下面查看您的修订代码

新图表（“myChart”{
键入：“行”，
数据：{
数据集：[
{
标签：“测试”，
背景色：“#ffadad”，
数据：[
{x:“2020-07-01T00:00:00.000Z”，y:0.4}，
{x:“2020-07-02T00:00:00.000Z”，y:0.4}
]
},
{
标签：“Deuxième projet”，
背景色：“ffd6a5”，
数据：[
{x:“2020-07-03T00:00:00.000Z”，y:0.6}，
{x:“2020-07-04T00:00:00.000Z”，y:0.6}，
{x:“2020-07-05T00:00:00.000Z”，y:0.6}，
{x:“2020-07-06T00:00:00.000Z”，y:0.6}，
{x:“2020-07-07T00:00:00.000Z”，y:0.6}，
{x:“2020-07-08T00:00:00.000Z”，y:0.6}，
{x:“2020-07-09T00:00:00.000Z”，y:0.6}，
{x:“2020-07-10T00:00:00.000Z”，y:0.6}，
{x:“2020-07-11T00:00:00.000Z”，y:0.6}，
{x:“2020-07-12T00:00:00.000Z”，y:0.6}，
{x:“2020-07-13T00:00:00.000Z”，y:0.6}，
{x:“2020-07-14T00:00:00.000Z”，y:0.6}，
{x:“2020-07-15T00:00:00.000Z”，y:0.6}，
{x:“2020-07-16T00:00:00.000Z”，y:0.6}，
{x:“2020-07-17T00:00:00.000Z”，y:0.6}，
{x:“2020-07-18T00:00:00.000Z”，y:0.6}，
{x:“2020-07-19T00:00:00.000Z”，y:0.6}，
{x:“2020-07-20T00:00:00.000Z”，y:0.6}，
{x:“2020-07-21T00:00:00.000Z”，y:0.6}，
{x:“2020-07-22T00:00:00.000Z”，y:0.6}，
{x:“2020-07-23T00:00:00.000Z”，y:0.6}，
{x:“2020-07-24T00:00:00.000Z”，y:0.6}，
{x:“2020-07-25T00:00:00.000Z”，y:0.6}，
{x:“2020-07-26T00:00:00.000Z”，y:0.6}，
{x:“2020-07-27T00:00:00.000Z”，y:0.6}，
{x:“2020-07-28:00:00.000Z”，y:0.6}，
{x:“2020-07-29T00:00:00.000Z”，y:0.6}，
{x:“2020-07-30T00:00:00.000Z”，y:0.6}
]        
},
{
标签：“卓越项目”，
背景颜色：“fdffb6”，
数据：[
{x:“2020-06-25T00:00:00.000Z”，y:0.5}，
{x:“2020-06-26T00:00:00.000Z”，y:0.5}，
{x:“2020-06-27T00:00:00.000Z”，y:0.5}，
{x:“2020-06-28:00:00.000Z”，y:0.5}，
{x:“2020-06-29T00:00:00.000Z”，y:0.5}，
{x:“2020-06-30T00:00:00.000Z”，y:0.5}，
{x:“2020-07-01T00:00:00.000Z”，y:0.5}，
{x:“2020-07-02T00:00:00.000Z”，y:0.5}，
{x:“2020-07-03T00:00:00.000Z”，y:0.5}，
{x:“2020-07-04T00:00:00.000Z”，y:0.5}，
{x:“2020-07-05T00:00:00.000Z”，y:0.5}，
{x:“2020-07-06T00:00:00.000Z”，y:0.5}，
{x:“2020-07-07T00:00:00.000Z”，y:0.5}，
{x:“2020-07-08T00:00:00.000Z”，y:0.5}，
{x:“2020-07-09T00:00:00.000Z”，y:0.5}，
{x:“2020-07-10T00:00:00.000Z”，y:0.5}，
{x:“2020-07-11T00:00:00.000Z”，y:0.5}，
{x:“2020-07-12T00:00:00.000Z”，y:0.5}，
{x:“2020-07-13T00:00:00.000Z”，y:0.5}，
{x:“2020-07-14T00:00:00.000Z”，y:0.5}，
{x:“2020-07-15T00:00:00.000Z”，y:0.5}，
{x:“2020-07-16T00:00:00.000Z”，y:0.5}，
{x:“2020-07-17T00:00:00.000Z”，y:0.5}，
{x:“2020-07-18T00:00:00.000Z”，y:0.5}，
{x:“2020-07-19T00:00:00.000Z”，y:0.5}，
{x:“2020-07-20T00:00:00.000Z”，y:0.5}，
{
data: [
          { x: "2020-06-30T00:00:00.000Z", y: 0.6 },
          { x: "2020-07-01T00:00:00.000Z", y: 0.4 },
          { x: "2020-07-02T00:00:00.000Z", y: 0.4 }
        ]
      },
      {
        label: "Deuxième projet",
        backgroundColor: "",
        data: [
          { x: "2020-06-30T00:00:00.000Z", y: 0.2 },
          { x: "2020-07-01T00:00:00.000Z", y: 0.4 },
          { x: "2020-07-02T00:00:00.000Z", y: 0.4 }
        ]
      },
      {
        label: "Premier project",
        backgroundColor: "",
        data: [
          { x: "2020-06-30T00:00:00.000Z", y: 0.6 },
          { x: "2020-07-01T00:00:00.000Z", y: 0.4 },
          { x: "2020-07-02T00:00:00.000Z", y: 0.4 }
        ]
      }