1

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

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

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

提前致谢。

4

0 回答 0