当 Xaxis 为时间时，堆积折线图无法正确显示答案

【问题标题】：Stacked line chart not displaying correctly when Xaxis is time当 Xaxis 为时间时，堆积折线图无法正确显示
【发布时间】：2020-07-31 21:04:22
【问题描述】：

我尝试制作一个以时间为 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”

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

【问题讨论】：

看到我删除了所有数据点，只保留了 2 个，它们堆叠在一起，codesandbox.io/s/chartjs-8sj7l?file=/src/index.js
我给了你答案，请将我的答案和赏金标记为正确
不，您的答案不正确，您没有理解问题，因为您提供的解决方案不起作用（请参阅我的 cmets）。
大声笑，你应该为所有三行或堆栈拥有相同的数据点，这是堆叠图表的基本原则。
只有很少的图表 api 可以有不相等的数据点，它们会像这样 jsfiddle.net/sdfx/hwx9awgn 那样按顺序排列它们，但您使用的是 vue 和其他图表 api

标签： javascript chart.js vue-chartjs

【解决方案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 值的所有标签。如果您想格式化您的日期，您可以使用可用的本地日期格式方法（作为我使用的示例），或者甚至使用像 moment.js 这样的库来管理格式：Moment.js Documentation

现在取决于你想要的输出图表：

堆叠的 yAxes

您可以从options.scales 中删除以下xAxes 块：

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 块：

yAxes: [{
   stacked: false
}]

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

【讨论】：

非常感谢您花时间回答问题。不幸的是，xAxis 必须是“时间”类型，因为我在代码的其他地方对其进行了操作。

【解决方案2】：

我认为您没有做错任何事，但怀疑 Chart.js (2.9.3) 的当前稳定版本是否可以处理这种情况（请参阅 issue）。堆叠显然是对来自不同数据集的具有相同索引的值进行的，x 值（时间）被忽略。

好消息是Chart.js 3.0.0-alpha.2 似乎可以按预期呈现这样的图表。然而问题是 vue-chartjs 包装器可能还不能与 Chart.js 3.0 一起使用。因此，您必须直接在项目中使用 Chart.js 库。

请在下面查看您修改后的代码。

new Chart('myChart', {
  type: "line",
  data: {
    datasets: [
      {
        label: "TEST",
        backgroundColor: "#ffadad",
        data: [
          { 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: "#ffd6a5",
        data: [
          { 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-28T00: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 }
        ]        
      },
      {
        label: "Premier project",
        backgroundColor: "#fdffb6",
        data: [
          { 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-28T00: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 },
          { x: "2020-07-21T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-22T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-23T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-24T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-25T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-26T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-27T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-28T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-29T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-30T00:00:00.000Z", y: 0.5 },
          { x: "2020-07-31T00:00:00.000Z", y: 0.5 }
        ]
      }
    ]
  },
  options: {
    animation: {
      duration: 500
    },    
    maintainAspectRatio: false,
    spanGaps: false,
    elements: {
      line: {
        tension: 0.000001
      }
    },
    tooltips: {
      mode: "x",
      intersect: false
    },
    scales: {
      y: {
        stacked: true,
        min: 0
      },
      x: {
        type: "time",
        distribution: "linear",
        time: {
          displayFormats: {
            day: "MMM DD"
          },
          tooltipFormat: "MMM DD"
        },
        ticks: {
          major: {
            enabled: true,
            fontStyle: "bold"
          },
          source: "data",
          autoSkip: true,
          autoSkipPadding: 75,
          maxRotation: 0,
          sampleSize: 100
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-alpha.2/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.2/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="myChart"></canvas>

如果您考虑将 2.n 图表迁移到 3.0 版，请咨询 Chart.js 3.x Migration Guide。

【讨论】：

非常感谢您花时间回答问题。但是，正如我的问题中所解释的，我正在使用这些依赖项：I'm using chartjs with vue. I use "vue-chartjs": "^3.5.0", "chart.js": "^2.9.3", "vue": "^2.6.11", "vuetify": "^2.2.11". 我没有在您的链接上看到如何使用此 vue 依赖项进行迁移。

【解决方案3】：

这就是答案 https://codesandbox.io/s/chartjs-8sj7l?file=/src/index.js

见下文，您在所有三行中都有三个数据点。然后它将被堆叠。每个项目的 x 和 y 变量的行数必须相等。如果duexi项目有2排，premier项目有3排，则不能堆叠。

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 }
        ]
      }

您多天使用相同的标签。所以我改变了图表的设置。你也有不相等的数据点。测试有两个数据点，其他的有多个。为了创建一条线，您的所有三条线都应该具有相同的数据点。您可以添加零并创建三行你的一行是 2 个数据点，最短，另一行有 12 个数据点

【讨论】：

感谢您的回答，但您的代码不起作用：看，这些行叠得不好。
@djcaesar9114 我告诉过你你有同一天的重复数据
这不是重复数据，我同一天有几个数据，很正常。或者，也许您可以指出数据对您来说很奇怪的地方？
它是堆叠的8sj7l.csb.app 在左边看到它是 0.2 ,04，0.6 是他们的轴值。我现在删除了你的背景颜色
@djcaesar9114 您只有两个数据点进行测试，而其他数据点则有 10-12 个数据点。您应该为其他人写零，以便所有 thress 线具有相同的数据点