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

问题描述

所以项目的要求是：

但我无法随着一天中的时间变化而改变这一点 并且也无法剥离网格线，使其显示在负 y 轴上， 如上图所示。 这是我能够做到的：

我想知道如何根据当天的进度移动此图表上的点（在本例中为太阳图标）。 这是我所做的代码：

  const data = (canvas) => {
        return {
      labels: ["6am","1pm","8pm"],datasets: [
        {
          data: arr,pointBackgroundColor: "rgba(250,250,250)",pointHoverBackgroundColor: "rgba(250,poinTradius: [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,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;
      }
    }
  ];

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）