javascript - 你如何动态设置chart.js背景颜色渐变?
问题描述
我正在创建一个 React 应用程序并使用 chart.js 显示来自https://www.coindesk.com/api的历史比特币价格数据
我希望根据显示的数据对图表的背景进行颜色编码。如果数据中的特定点较低,则背景应为红色。如果它很高,它应该是绿色的。在中间的某个地方,它应该是黄色的。
我可以让屏幕显示各种颜色,但它们没有按预期与图表上的点对齐。
波谷应该是红色的,波峰应该是绿色的,但它们并不完全匹配。
我已经看过这两个堆栈溢出帖子,但它们并没有我需要的东西。 Chart.js 和渐变背景色 Chart.js 折线图设置背景色
我还对 HTML 画布进行了更多研究,看看我是否弄错了宽度。我不这么认为,但这仍然是一种可能性。
class PriceIndexChart extends Component {
state = {
labels: [],
data: [],
}
async getPriceIndexData() {
const response = await fetch('https://api.coindesk.com/v1/bpi/historical/close.json?start=2019-05-11&end=2019-05-23');
let data = await response.json();
return data;
}
componentDidMount() {
this.getPriceIndexData()
.then(d => this.setState({
labels: Object.keys(d.bpi),
data: Object.values(d.bpi)
}))
.catch(err => console.log(err))
}
getColorStopColors = () => {
const colors = ['rgba(231, 76, 60, 1)', 'rgba(241, 196, 15, 1)', 'rgba(46, 204, 113, 1)'];
const numArr = [...this.state.data];
const sortArr = [...numArr].sort((a,b) => a - b);
const breakPoint = Math.floor(numArr.length / 3);
const firstThird = sortArr[breakPoint];
const secondThird = sortArr[breakPoint * 2];
const max = Math.max(...numArr);
let output = [];
for (let n of numArr) {
switch (true) {
case n <= firstThird:
output.push(this.getRGBA(n, firstThird, colors[0]));
break;
case n <= secondThird:
output.push(this.getRGBA(n, secondThird, colors[1]));
break;
case n > secondThird:
output.push(this.getRGBA(n, max, colors[2]));
break;
default:
console.log('something went wrong');
break;
}
}
return output;
}
getRGBA = (num, max, clr) => {
return `rgba(${chroma(clr).alpha(num / max)._rgb.join(', ')})`;
}
getColorStopStops = () => {
const length = this.state.data.length;
let output = [];
for (let i in this.state.data) {
output.push(i / length);
};
return output;
}
setColorGradient = (canvas) => {
const width = canvas.clientWidth;
const ctx = canvas.getContext('2d');
console.log(ctx);
const gradient = ctx.createLinearGradient(0, 0, width, 0);
const grdntStops = this.getColorStopStops();
const grdntColors = this.getColorStopColors();
for (let i = 0; i < this.state.data.length; i++) {
gradient.addColorStop(grdntStops[i], grdntColors[i]);
}
// console.log(grdntStops, grdntColors);
return gradient;
}
makeChart = canvas => {
const chartData = {
labels: this.state.labels,
datasets: [
{
label: 'bitcoin price',
data: this.state.data,
backgroundColor: this.setColorGradient(canvas),
pointHoverBackgroundColor: 'rgba(254, 202, 87, 1)',
borderColor: 'rgba(10, 189, 227, .8)',
borderWidth: 5,
borderJoinStyle: 'round',
lineTension: .2,
},
]
}
return chart;
}
解决方案
推荐阅读
- python - 如何在 pygame 中使用图像进行碰撞检测
- laravel - 雄辩的创建方法在存储数据后返回“id”0
- java - 如何创建一个函数来确定来自 youtube 的当前视频 URL?
- javascript - 如何从使用 nodejs 的直接链接下载文件
- python - 在 Python 3 中从特定端口读取 TCP 数据包
- excel - Validate if sheet exists before deleting
- azure - 部署 azure sql server 时发现 NoRegisteredProvider
- angular - 通过 Twitter、GitHub、Microsoft 的 Angular FirebaseUI 身份验证不工作
- python - 在 Heroku 上部署 Flask 应用程序
- python - 使用 Python 代码从另一个文件计算情绪数据平均值的 SyntaxError