Chartjs4.4：无法在1 Graph

Question

我在使用ChartJs中绘制2行的2行有一个问题：我获得了2行，而1行代码为1个，带有2行，我认为我犯了一个非常simpe的错误，但我找不到它。我已经花了几个小时。

当我对齐时间戳（以相同的间隔）对齐时，一切都很好。但是时间戳有不同的间隔。

在这里是代码：

<html> <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> new Chart("myChart", { type: 'line', data: { datasets: [{ data: [{x:'2021-11-06 23:39:30',y:1900},{x:'2022-11-07 01:00:28',y:2000},{x:'2023-11-08 09:00:28',y:1800}], borderColor: "red", label:"John", fill: false },{ data: [{x:'2021-11-06 21:39:30',y:1800},{x:'2022-11-07 00:10:28',y:1650},{x:'2023-11-08 12:00:28',y:1900}], borderColor: "blue", label:"Laura", fill: false }], }, options: { scales: { x: { }, y: { min: 1000, max: 2400, } } } }); </script> </html>

这就是我得到的

2 graphs 这就是我想要的：

well对我来说，简单 /快速的解决方案是使用“ date-module /适配器”，因为您的X值是日期。只需添加所需的libs并将

type

Answer 1

x

以例如

time

，就应将其全部转换为更正的数据，并在同一轴上显示。

简短演示：

const config = {
  type: 'line',
  data: {
    datasets: [
      {
        data: [
          { x: '2021-11-06 23:39:30', y: 1900 },
          { x: '2022-11-07 01:00:28', y: 2000 },
          { x: '2023-11-08 09:00:28', y: 1800 },
        ],
        borderColor: 'red',
        label: 'John',
        fill: false,
      },
      {
        data: [
          { x: '2021-11-06 21:39:30', y: 1800 },
          { x: '2022-11-07 00:10:28', y: 1650 },
          { x: '2023-11-08 12:00:28', y: 1900 },
        ],
        borderColor: 'blue',
        label: 'Laura',
        fill: false,
      },
    ],
  },

  options: {
    scales: {
      x: { type: 'time' },
      y: {
        min: 1000,
        max: 2400,
      },
    },
  },
};

var myChart = new Chart(document.getElementById('chart'), config);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

Chartjs4.4：无法在1 Graph

问题描述投票：0回答：1

1个回答

最新问题

Chartjs4.4：无法在1 Graph

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1