如何为chartjs散点图中的每个数据添加颜色答案

【问题标题】：how to add color to each data in chartjs scatter plot如何为chartjs散点图中的每个数据添加颜色
【发布时间】：2021-03-30 04:18:52
【问题描述】：

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绘制散点图并根据数据有条件地渲染pointbackground颜色，无论数据属于短期还是长期或中期，但我无法给出这些不同的术语有不同的颜色，任何人都可以帮我解决这个问题

【问题讨论】：

你能发布一个 CodeSandbox 的链接吗？帮助你很容易。

标签： javascript reactjs chart.js react-chartjs react-chartjs-2

【解决方案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>
  );
}

【讨论】：