如何在 React 图表中填充整个框（两个轴之间）

Question

在 React.js 中使用 ChartJS 库时，我遇到了一些问题。基本上，我想要做的是从特定端点获取数据，当我获取该数据时，我想用它填充图表。我遇到的问题是找出如何填充两个值（X 和 Y）之间的整个框。

我将向您展示设计，您对我正在尝试做的事情有更好的了解：

设计

这是我正在做的项目的设计。方框内的数字不重要，因为它们代表该范围内的人数，例如，数字 23 表示得分在 65-70（Y 轴）之间且得分为 24 的人-28 小时费率（X 轴）。

是否可以使用 ChartJS 实现类似的功能，或者我应该选择退出并开始使用其他库？

Answer 1

这可以通过 chartjs-plugin-annotation box annotations and label annotations 完成，如下所示：

const data = [
  { x: 4, y: 5, width: 4, height: 5, label: 4 },
  { x: 4, y: 10, width: 4, height: 5, label: 7 },
  { x: 8, y: 15, width: 4, height: 5, label: 12 },
  { x: 8, y: 25, width: 4, height: 5, label: 16 },
  { x: 12, y: 5, width: 4, height: 5, label: 8 },
  { x: 16, y: 0, width: 4, height: 5, label: 6 },
  { x: 20, y: 10, width: 4, height: 5, label: 12 }, 
  { x: 24, y: 20, width: 4, height: 5, label: 18 },
  { x: 24, y: 30, width: 4, height: 5, label: 9 },
];

const rectangles = data.map(o => ({
  type: 'box',
  backgroundColor: 'rgba(0, 0, 254, 0.4)',
  xMin: o.x,
  yMin: o.y,
  xMax: o.x + o.width,
  yMax: o.y + o.height
}));

const labels = data.map(o => ({
  type: 'label',
  content: o.label,  
  color: 'white',
  font: {
    size: 16    
  },
  position: {
    x: 'center',
    y: 'center'
  },
  xValue: o.x + o.width / 2,
  yValue: o.y + o.height / 2
}));

new Chart('myChart', {
  type: 'scatter',
  options: {
    plugins: {
      annotation: {
        annotations: rectangles.concat(labels)
      }
    },
    scales: {
      x: {
        position: 'top',
        suggestedMin: 0,
        suggestedMax: 32,
        ticks: {
          stepSize: 4
        }
      },
      y: {
        suggestedMin: 0,
        suggestedMax: 35,
        ticks: {
          stepSize: 5
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart"></canvas>

如何在 React 图表中填充整个框（两个轴之间）

How to populate entire box inside a React chart (between two axes)

reactjs

chart.js

react-chartjs

设计