Chart.js 不会在图表线上画线

Question

我在 React 上使用 Chart.js v3.7.0 如下

export default function MyChart(props) {
const {
    chartData = [10, 1, 5, 4, 20, 25, 10]
  } = props

  const canvasRef = useRef()

  useEffect(() => {
    const chartConfig = {
      type: 'line',
      data: {
        datasets: [{
          labels: chartData.map(() => null),
          data: chartData,
          borderColor: 'rgba(0, 255, 0)',
          backgroundColor: 'rgba(0, 255, 0)',
          label: 'Open',
          borderWidth: 1,
          fill: true
        }]
      },
      options: {
        plugins: {
          responsive: true
        }
      }
    }
    new Chart(canvasRef.current, chartConfig)
  }, [])

  return (<>
    <canvas ref={canvasRef} />
  </>)
}

它绘制了网格线，并且图例以正确的颜色显示。如果您弄乱 chartData，垂直轴甚至会相应地缩放。但是曲线不会出现。这有什么问题吗？这是与 React 相关的东西还是我使用 datasets 错误？

Answer 1

标签数组需要与您的数据集处于同一级别，如下所示：

data:{
  labels: [],
  datasets: []
}

Chart.js 不会在图表线上画线

Chart.js won't draw the line on chart line

reactjs

chart.js