线只渲染垂直线而不是斜线

Question

线条未正确呈现。它呈现为 instead of

我的代码如下：

LineGraph.js:

import React from 'react'
import {Line} from 'react-chartjs-2';

function Linegraph() {
    return (
        <div className="linegraph">
            <Line
                data={{
                    datasets:[{
                        type:"line",
                        data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
                        backgroundColor:"black",
                        borderColor:'#5AC53B',
                        borderWidth:2,
                        pointBorderColor:'rgba(0,0,0,0)',
                        pointBackgroundColor:'rgba(0,0,0,0)',
                        pointHoverBackgroundColor:'#5AC53B',
                        pointHoverBorderColor:"#000000",
                        pointHoverBorderWidth:4,
                        pointHoverRadius:6,
                    }]
                }}
            />
        </div>
    )
}

export default Linegraph

我正在学习教程 here，在 1:33:17 他们成功地实施了它，而我的仍然是垂直线向下。

这也是我的项目设置的屏幕截图：

非常感谢您的帮助！

Answer 1

您可以将图表 type 更改为 'scatter' 并将属性 drawLine: true 添加到数据集。

datasets:[{
  type: "scatter",
  drawLine: true,
  data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
  ...

The Chart.js documentation states that scatter charts are based on basic line charts with the x axis changed to a linear axis.

因此，假设您将 react-chartjs-2 与 Chart.js v3 一起使用，您也可以保留 type: 'line' 但必须定义x轴为type: 'linear'如下：

data={{
  type: "line",
  ...
}}
options={{
  scales: {
    x: {
      type: "linear"
    }
  }
}}

Answer 2

我们最终通过进入 package.json 并设置以下版本来让它工作：

'chart.js':'^2.9.4',
'react-chartjs-2':'^2.11.1'

=)

线只渲染垂直线而不是斜线

Line is rendering only vertical line instead of sloped line

chart.js

react-chartjs