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

【问题标题】：Chart.js won't draw the line on chart lineChart.js 不会在图表线上画线
【发布时间】：2022-01-04 11:05:55
【问题描述】：

我在 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 错误？

【问题讨论】：

标签： reactjs chart.js

【解决方案1】：

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

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

【讨论】：