如何为chartjs scatter plot中的每个数据添加颜色

Question

let dataSet = [];
  Object.keys(stateData).map((item) => {
    let short = {};
    let medium = {};
    let long = {};
    if (stateData[item].horizon === "Short-term") {
      short["label"] = "Short-term";
      short["pointBackgroundColor"]="rgba(201, 120, 12, 1)"
      short["x"] = stateData[item].impact;
      short["y"] = stateData[item].occurrence;
      dataSet.push(short);
    }
    if (stateData[item].horizon === "Medium-term") {
      medium["label"] = "Medium-Term";
      medium["pointBackgroundColor"]="rgba(201, 120, 12, 1)"
      medium["x"] = stateData[item].impact;
      medium["y"] = stateData[item].occurrence;
      dataSet.push(medium);
    }
    if (stateData[item].horizon === "Long-term") {
      long["label"] = "Long-Term";
      long["pointBackgroundColor"]="rgba(201, 120, 12, 1)"
      long["x"] = stateData[item].impact;
      long["y"] = stateData[item].occurrence;
      dataSet.push(long);
    }
  });


  const data = {
    datasets: [
      {
        data: dataSet,
      }
    ]
  };
  const options = {
    title: {
      display: true,
      text: "Risks"
    },
    scales: {
      xAxes: [
        {
          ticks: {
            max: 10,
            min: 0,
            stepSize: 0.5
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            max: 10,
            min: 0,
            stepSize: 0.5
          }
        }
      ]
    }
  };

  return (
    <div className="w-full h-9/12">
      <div className="chartjs-wrapper">
        <Scatter data={data} options={options} />
      </div>
    </div>
  );
}

上面的代码是我试图做的是使用chartjs绘制散点plot并根据数据有条件地渲染pointbackground颜色，无论数据属于短期还是长期或中期，但我无法给出不同的colors这些不同的术语可以请任何人帮助我吗

Answer 1

在您的let dataSet下放置另一个数组let backgroundColor ，而不是在 if 中的对象中设置 pointBackgroundColor ，将该颜色推送到数组中，然后将此数组作为 backgroundColors 添加到数据集中，这样您将得到如下结果：

  let dataSet = [];
  let backgroundColor: [];  

  Object.keys(stateData).map((item) => {
    let short = {};
    let medium = {};
    let long = {};
    if (stateData[item].horizon === "Short-term") {
      short["label"] = "Short-term";
      backgroundColor.push("rgba(201, 120, 12, 1)")
      short["x"] = stateData[item].impact;
      short["y"] = stateData[item].occurrence;
      dataSet.push(short);
    }
    if (stateData[item].horizon === "Medium-term") {
      medium["label"] = "Medium-Term";
      backgroundColor.push("rgba(201, 120, 12, 1)")
      medium["x"] = stateData[item].impact;
      medium["y"] = stateData[item].occurrence;
      dataSet.push(medium);
    }
    if (stateData[item].horizon === "Long-term") {
      long["label"] = "Long-Term";
       .push("rgba(201, 120, 12, 1)")
      long["x"] = stateData[item].impact;
      long["y"] = stateData[item].occurrence;
      dataSet.push(long);
    }
  });


  const data = {
    datasets: [
      {
        data: dataSet,
        backgroundColor
      }
    ]
  };
  const options = {
    title: {
      display: true,
      text: "Risks"
    },
    scales: {
      xAxes: [
        {
          ticks: {
            max: 10,
            min: 0,
            stepSize: 0.5
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            max: 10,
            min: 0,
            stepSize: 0.5
          }
        }
      ]
    }
  };

  return (
    <div className="w-full h-9/12">
      <div className="chartjs-wrapper">
        <Scatter data={data} options={options} />
      </div>
    </div>
  );
}