React.js 中的 ELD 每日日志图表

Question

我想在 React.js 中创建一个像这样的 ELD 图表。我尝试阅读不同图表库中的文档。然而，我找不到任何符合要求的。请向我提供任何方法或库来实现它。

如何用JavaScript或类似语言创建24小时值班状态图？

其他背景：

图表应直观地代表不同的值班状态（例如下班、卧铺、驾驶、值班）。每个状态都应该用颜色编码并有相应的标签。网格应显示每种状态花费的总小时数。

Answer 1

既然您提到您无法找到实现此目的的库，这里有一个使用 HTML Canvas API 的粗略解决方案。

const WIDTH = 900;
const HEIGHT = 200;

const PADDING = 15;

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const noOfHorizontalGrids = 5;
const noOfVerticalGrids = 24;

const horizontalGridOffset = (HEIGHT - 2 * PADDING) / noOfHorizontalGrids;
const verticalGridOffset = (WIDTH - 2 * PADDING) / noOfVerticalGrids;

context.beginPath();
context.strokeStyle = 'lightgray';
// Draw the horizontal grid
Array(noOfHorizontalGrids).fill(0).forEach((_, lineNo) => {
  context.moveTo(PADDING, (lineNo + 1) * horizontalGridOffset);
  context.lineTo(WIDTH - PADDING, (lineNo + 1) * horizontalGridOffset);
  context.stroke();
  context.fillText(noOfHorizontalGrids - lineNo, 3, (lineNo + 1) * horizontalGridOffset + 3);
});

// Draw the vertical grid
Array(noOfVerticalGrids).fill(0).forEach((_, lineNo) => {
  context.moveTo((lineNo + 1) * verticalGridOffset, PADDING);
  context.lineTo((lineNo + 1) * verticalGridOffset, HEIGHT - PADDING);
  context.stroke();
  context.fillText(lineNo + 1, (lineNo + 1) * verticalGridOffset - 3, HEIGHT - 3);
});
context.closePath();

const data = [
  { x: 1, y: 3 },
  { x: 8, y: 3 },
  { x: 8, y: 0 },
  { x: 10, y: 0 },
  { x: 10, y: 4 },
  { x: 24, y: 4 },
];

context.beginPath();
context.strokeStyle = 'black';
context.moveTo(
  data[0].x * verticalGridOffset,
  (noOfHorizontalGrids - data[0].y) * horizontalGridOffset,
);
data.forEach(dataItem => {
  context.lineTo(
    dataItem.x * verticalGridOffset,
    (noOfHorizontalGrids - dataItem.y) * horizontalGridOffset,
  );
});
context.stroke();
context.closePath();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style="padding: 16px;box-sizing: border-box;">
    <canvas id="canvas" width="900" height="200" style="border:1px solid #000000;">
    </canvas> 
  </div>
</body>
<script src="./index.js"></script>
</html>

由于时间限制，我只能绘制一个简单的网格，并带有类似于您的屏幕截图的方形折线图。

但是，实施附加细节应该不会太困难。对于 Y 轴，我显示了数字。但这些可以轻松地用硬编码文本列表替换。 X 轴也可以这样做。

您提到您需要以颜色编码显示一些数据，在这种情况下，Canvas API 的知识很有用。

您可以在此处

找到有关 Canvas API 的详细信息

React.js 中的 ELD 每日日志图表

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

1个回答

最新问题

React.js 中的 ELD 每日日志图表

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

1个回答

最新问题

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