尝试在 Chart.js 中混合图形类型不起作用

如何解决尝试在 Chart.js 中混合图形类型不起作用

我正在尝试使用 Chart.js v2 在折线图顶部绘制点，但无论我指定的值如何，这些点始终绘制在图的左侧： Example

我尝试了不同的方法来实现这一目标，但没有成功。这是我到目前为止的代码：

const createData = (index,f) => {
    let res = {
      label: index,borderWidth: 3,backgroundColor: "rgba(0,0)",borderColor: "#" + scheme.colors()[index],data: evaluateFunction(f,props.min,props.max,props.step)[0],pointBackgroundColor: "rgba(0,pointBorderColor: "rgba(0,0)"
    };

    return res;
  };

  function createDatasets(fs,points) {
    let res = [];

    fs.map((item,index) => res.push(createData(index,item)));

    points.map((item,index) =>
      res.push({
        data: [{ x: item[0],y: item[1] }],label: "point",order: -1,backgroundColor: "#cd2026",type: "bubble"
      })
    );

    return res;
  }
  let graphData = {
    labels: evaluateFunction(props.f[0],props.step)[2],datasets: createDatasets(props.f,props.points)
  };

  console.log("ALO: " + props.f);
  return (
    <div style={{ width: "100%" }}>
      <Line
        data={graphData}
        options={{
          legend: {
            display: false
          },scales: {
            yAxes: [
              {
                display: true,ticks: {
                  suggestedMin: 0
                }
              }
            ]
          },responsive: true,title: { text: props.title,display: true }
        }}
      />
    </div>
  );

这个组件是这样调用的：

...
const [rows,setRows] = useState([["(x)/(4)"],["2*x"]]);
const [slider,setSlider] = React.useState([-1,1]);
...
return(
<Graph
            title="TEST"
            f={rows.map((val) => val[0])}
            points={[[0,1]]}
            min={slider[0]}
            max={slider[1]}
            step={0.1}
          />
)

提前致谢。