如何为chartjs散点图中的每个数据添加颜色
how to add color to each data in chartjs scatter plot
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 绘制散点图,并根据数据有条件地渲染点背景颜色,无论数据属于短期、长期还是中期,但我无法做到给这些不同的术语赋予不同的颜色,谁能帮我解决这个问题
在你的 let dataSet
下放置另一个数组 let backgroundColor
而不是在 if 中的对象中设置 pointBackgroundColor ,将那个 collor 推入数组,然后将这个数组作为 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>
);
}
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 绘制散点图,并根据数据有条件地渲染点背景颜色,无论数据属于短期、长期还是中期,但我无法做到给这些不同的术语赋予不同的颜色,谁能帮我解决这个问题
在你的 let dataSet
下放置另一个数组 let backgroundColor
而不是在 if 中的对象中设置 pointBackgroundColor ,将那个 collor 推入数组,然后将这个数组作为 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>
);
}