如何使用 Chart.js 绘制每小时检测到的活动图表

Question

我有这个进程，每 10 分钟运行一次，以检查来自另一个进程的活动，如果它检测到任何 activity，它会将日期、时间和一个 "A" 添加到数据库中积极的。
在接下来的10分钟再次运行时，如果activity消失了，它会在数据库中添加另一条记录日期，时间和正常的"N"。如果 activity 在下一次检查中仍然存在，它将不会在数据库中添加另一条记录，除非有其他情况。
然后我在数据库中有一条记录，显示昨天在“2017-03-21 22:30:05”它检测到 activity，添加了 "A"，这个 activity 一直持续到“2017- 03-22 01:15:10”，当检查时没有检测到activity，添加另一条记录，日期时间为“2017-03-22 01:15:10”，字母为"N".

我正在尝试制作一个显示正常 activity 的折线图，并可能沿着这条线向下移动，显示它检测到任何 activity.

的一天中的时间

如果有人使用 Chart.js 做过类似的事情，我们将不胜感激，我看不出如何将这些数据映射到图表上以在它检测到任何 activity 时显示。

谢谢！

Answer 1

如果我正确解释了你的问题，这里有一个你可以使用的选项。在直接跳到示例之前，让我解释一下该方法。

首先，您的要求有点挑战性，因为这需要在 y 轴上使用 "category" 刻度以及在 x 轴上使用 "time" 刻度。这是一个挑战，因为折线图通常具有 "category"、"linear" 或 "time" x 轴以及 y 轴上的基于数值的刻度（例如线性、对数等） .

因此，为了克服这个问题，我不得不在 y 轴上使用 "linear" 比例尺，但使用一些回调使其看起来好像实际上是 "category" 比例尺。顺便说一句，我尝试在 y 轴上添加一个 "category" 比例，但永远无法渲染图表（所以我认为这是不可能的）。

由于您没有提供数据存储方式的确切示例，我不得不对我的模拟数据做出一些假设。不管它实际是如何存储的，方法都是处理数据以将其转换为 chart.js 可以理解的格式。在我的示例中，我使用名为 prepareDataForChart.

的函数完成了此操作

这是最终的图表配置。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: "Object 1",
      fill: false,
      borderColor: window.chartColors.red,
      backgroundColor: window.chartColors.white,
      pointRadius: 0,
      steppedLine: true,
      data: prepareDataForChart(mockedActivityData),
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Object Activity State Over Time'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
      callbacks: {
        // since we mapped the eventState to a numerical value,
        // let's convert that back to a text value when the tooltip
        // is displayed
        label: function(tooltipItem, data) {
          if (tooltipItem.yLabel === 1) {
            return 'Normal';
          } else if (tooltipItem.yLabel === 2) {
            return 'Active';
          }
        }
      }
    },
    scales: {
      xAxes: [{
       type: 'time',
        time: {
          unit: 'minute',
          displayFormats: {
            minute: 'lll',
          },
          tooltipFormat: 'lll',
        },
        scaleLabel: {
          display: true,
          labelString: 'Time',
        }
      }],
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Activity State',
        },
        ticks: {
          min: 0,
          max: 3,
          stepSize: 1,
          // since we mapped the eventState to a numerical value,
          // let's convert that back to a text value to display 
          // on the y-axis (and also hide all other tick labels)
          callback: function(value, index, values) {
            if (value === 2) {
              return 'Active';
            } if (value === 1) {
              return 'Normal';
            } else {
              return ' ';
            }
          },
        },
      }]
    }
  }
});

而且因为能够实际看到一些东西总是很好，所以这里是 codepen example。

如何使用 Chart.js 绘制每小时检测到的活动图表

How to chart detected activities on the hour using Chart.js

html

jquery

chart.js

chart.js2