charts - 如何动态移动chart.js中图表上的点？

Question

所以项目的要求是：

但是我无法随着一天中的小时数变化而移动该点，也无法剥离 gridLines 使其显示在负 y 轴上，如上图所示。这是我能够做到的：

我想知道如何根据一天的进度在此图表上移动点（在这种情况下为太阳图标）。这是我所做的代码：

  const data = (canvas) => {
        return {
      labels: ["6am", "1pm", "8pm"],
      datasets: [
        {
          data: arr,
          pointBackgroundColor: "rgba(250,250,250)",
          pointHoverBackgroundColor: "rgba(250,250,250)",
          pointRadius: [0, 0, 0],
          pointStyle: ["", sunImage, ""]
        }
      ]
    };
  };

  const options = {
    responsive: false,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    plugins: {
      legend: {
        labels: {
          usePointStyle: true
        }
      }
    },
    scales: {
      yAxes: [
        {
          ticks: {
            display: false,
            min: -150,
            max: 500
          },
          gridLines: {
            lineWidth: 0,
            zeroLineWidth: 0.85
          }
        }
      ],
      xAxes: [
        {
          distribution: "series",
          bounds: "ticks",
          gridLines: {
            drawBorder: false,
            lineWidth: 1.2,
            color: "grey",
            zeroLineWidth: 1,
            zeroLineColor: "grey"
          },
          ticks: {
            source: "data",
            padding: 15,
            fontSize: 12,
            maxTicksLimit: 2
          }
        }
      ]
    },
    tooltips: {
      enabled: false
    },
  };

  var plugins = [
    {
      beforeRender: function (x, args, options) {
        var c = x.chart;
        var dataset = x.data.datasets[0];
        var yScale = x.scales["y-axis-0"];
        var yPos = yScale.getPixelForValue(0);
        var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
        gradientFill.addColorStop(0, "#FFD097");
        gradientFill.addColorStop(yPos / c.height, "#FFF1E1");
        gradientFill.addColorStop(yPos / c.height, "#66696E");
        gradientFill.addColorStop(1, "#66696E");
        var model =
          x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset
            ._model;
        model.backgroundColor = gradientFill;
        model.borderColor = gradientFill;
      }
    }
  ];

标签： chartschart.jschart.js2react-chartjs-2