javascript - 如何为chartjs散点图中的每个数据添加颜色
问题描述
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颜色,无论数据属于短期还是长期或中期,但我无法给出不同的颜色这些不同的术语可以请任何人帮助我吗
解决方案
在您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>
);
}
推荐阅读
- java - java - 如何在给定时间间隔内更新db中的值?
- concatenation - 如何在 POWER BI 中使用 CONCATENATEX 或类似函数获取具有多种类型的 Distinct ID
- c# - Identity Server Saml2AuthExtensions Idp 发起的 SSO
- stm32 - 支持 DMA 的 ADC 与 FreeRTOS
- php - 带有 xml 元素的文本位
- javascript - 如果 columnDefs 中有很多目标,如何测试列索引?
- node.js - 如何使用电报捕获编辑的消息
- firebase - Firebase Analytics 中的事件未显示在 Big Query 中
- c++ - 以下问题是多线程问题。我需要在下一行打印“完成”而不使用“\n”或“endl”
- rxjs - 使用 Subject next() 调用 observables 不起作用