Chart.js不同时间数据集

Question

我想用Chart.js绘制我的DIY恒温器和加热器状态的温度读数。加热器状态是0或1，但我将它保存在一个最小的表示形式中:我只有在它打开/关闭时才有值。加热时间永远不会等于测量时间，而是介于两者之间。

我想在同一个时间x轴上绘制时间数据。从至少20个例子，这里的问题和其他资源中，我收集了this Fiddle，这是我最好的猜测。然而，我不能合理地同时绘制时间轴和它们的数据。如果我在一个非常简单的例子中将其简化为x轴上的数字数据，我得到的是在后者的前几个x值上绘制的较小的数据集。

js代码是：

var options = {
  type: 'line',
  data: {
    labels: ["2018-12-07 08:45:17", 
    "2018-12-07 09:30:17", "2018-12-07 10:15:16", 
    "2018-12-07 11:00:17", "2018-12-07 14:45:16"],
    datasets: [
        {
          label: '1st line',
          data: [12, 19, 7, 9, 10, 8],
        },  
            {
          steppedLine: 'before',
          xAxisID: 'x-axis-2',
          label: '2nd line',
          data: [                       
          {
            x: "2018-12-07 09:15:47",
            y: 3
          }, {
            x: "2018-12-07 10:55:25",
            y: 5
          }, {
            x: "2018-12-07 13:05:00",
            y: 3
          }],
        }
     ]
  },
  options: {
    scales: {
      xAxes: [{}, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        //display: false,
      }],
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Answer 1

首先，您可以使用唯一的xAxis并将其定义为time cartesian axis。

xAxes: [{
  type: 'time',
  time: {
    unit: 'second'
  }
}]

此外，您不应该提供data.labels，而应该使用包含x和y属性的对象来定义每个data point。

​

var options = {
  type: 'line',
  data: {
    datasets: [{
        label: '1st line',
        data: [{
            x: "2018-12-07 08:45:17",
            y: 12
          },
          {
            x: "2018-12-07 09:30:17",
            y: 19
          },
          {
            x: "2018-12-07 10:15:16",
            y: 7
          },
          {
            x: "2018-12-07 11:00:17",
            y: 9
          },
          {
            x: "2018-12-07 14:45:16",
            y: 10
          }
        ]
      },
      {
        label: '2nd line',
        steppedLine: 'before',
        data: [{
            x: "2018-12-07 09:15:47",
            y: 3
          },
          {
            x: "2018-12-07 10:55:25",
            y: 5
          },
          {
            x: "2018-12-07 13:05:00",
            y: 3
          }
        ],
        backgroundColor: 'lightgreen'
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'second'
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>

​