Chart.js 横条可以处理时间序列数据吗？

Question

我正在尝试开发基于时间序列数据的堆积条形图。数据代表登录到 Influx 的机器的运行。

环顾四周，我还没有看到这样做，似乎无法让我的数据正确排列以制作堆积条形图。本质上，我想为运行显示一种颜色，而不为运行显示一种颜色。这不是问题，因为这可以通过编程方式更改。

但是，我似乎面临的问题更多是配置问题。我希望时间序列适配器自动将我的数据与它在我的数据集中的对应方式对齐。

到目前为止，请参阅我的示例。澄清一下，我在撰写本文时使用的是最新的 Chart.js 3.7

const data = {
  labels: ["Label 1"],
  datasets: [{
    label: "Testing",
    data: [{
        x:  moment().valueOf(),
      y: moment().valueOf()
    }],
    backgroundColor: "red"
  },
  {
    label: "Testing",
    data: [{
        x:  moment().add(1, 'day').valueOf(),
            y: moment().add(1, 'day').valueOf()

    }],
    backgroundColor: "blue"
  }]
};
const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        ticks: {
                beginAtZero: true
            },
        stacked: true,
        type: 'time',
        time: {
            unit: 'day',
          unitStepSize: 6
        }
      },
      y: {
        stacked: true
      }
    }
  }
};

new Chart("myChart", config)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<canvas id="myChart"></canvas>

方向正确的任何一点都是最有益的。我也会回答任何问题，以阐明我在配置上的过程。

Answer 1

问题是 Date 表示自 1970 年 1 月 1 日 UTC 以来的毫秒数。因此，您需要定义开始日期以仅查看感兴趣的期间。这可以通过将 min 选项添加到 x-axis 来完成，如下所示：

min: moment().startOf('day').subtract(1, 'day')

You should also use moment().startOf('day') when defining your data. That way, the ticks on the x-axis will be correctly positioned.

请查看下面您修改后的代码，看看它是如何工作的。

const data = {
  datasets: [{
      label: "Testing",
      data: [{
        x: moment().startOf('day'),
        y: 0
      }],
      backgroundColor: "red"
    },
    {
      label: "Testing",
      data: [{
        x: moment().startOf('day').add(1, 'day'),
        y: 0
      }],
      backgroundColor: "blue"
    }
  ]
};
const config = {
  type: 'bar',
  data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: () => ''
        }
      }
    },
    indexAxis: 'y',
    scales: {
      x: {      
        stacked: true,
        type: 'time',
        time: {
          unit: 'day'
        },
        min: moment().startOf('day').subtract(1, 'day')
      },
      y: {
        stacked: true
      }
    }
  }
};

new Chart("myChart", config)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<canvas id="myChart" height="90"></canvas>

Chart.js 横条可以处理时间序列数据吗？

Can Chart.js Horizontal bar work with time series data?

html

javascript

charts

chart.js