我正在使用折线图向用户显示最近的交易,并且我想在金额下方显示交易日期。目前,我可以按预期工作(日期工具提示除外),并且正在传递包含属性(时间(t)和余额/金额(y))的对象数组。
{
y: 100,
t: 1541973
}
我对图形的配置看起来像这样(请记住,我使用react-chartjs-2
这是react的包装器,因此可能看起来有些不同:
const data = (canvas) => {
const ctx = canvas.getContext('2d');
let gradient = ctx.createRadialGradient(width, 0, height * 2, width, 0, 0);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
gradient.addColorStop(0.5, 'rgba(230, 230, 230, 0.28)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 1)');
let borderGradient = ctx.createLinearGradient(150, 0, width, 0);
borderGradient.addColorStop(0, `rgba(255, 255, 255, ${ 0.11 * q })`);
borderGradient.addColorStop(0.33, 'rgba(255, 255, 255, 0)');
borderGradient.addColorStop(0.66, `rgba(255, 255, 255, ${ q })`);
borderGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
if (isMobile) {
gradient = ctx.createRadialGradient(width / 2, -height, 0, width / 2, -height, height * 2.1);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.5, 'rgba(230, 230, 230, 0.28)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
borderGradient = ctx.createLinearGradient(0, 0, width * 1.2, 0);
borderGradient.addColorStop(0, `rgba(255, 255, 255, ${ 0.11 * q })`);
borderGradient.addColorStop(0.06, 'rgba(255, 255, 255, 0)');
borderGradient.addColorStop(0.35, `rgba(255, 255, 255, ${ q })`);
borderGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
}
return {
labels: Array(7),
datasets: [{
label: 'Balance',
data: chartData,
backgroundColor: gradient,
borderWidth: 1,
borderColor: borderGradient,
}],
};
};
const options = {
responsive: false,
title: false,
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
},
elements: {
point: false,
rectangle: {
backgroundColor: '#000',
},
},
scales: {
xAxes: [{
display: false,
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}],
},
};
我对Chartjs还是很陌生,并尝试了其文档中列出的几种不同策略,但没有一个产生我想要的结果。我只想在工具提示中的y
值下方显示日期。
非常感谢您的帮助:)