我在React中使用Chartjs。我有一个包含三个数据集的加密货币价格图表,其中一个是价格列表,一个是与初始价格相切的水平线,另一个是与最高点相切的水平线。下面是它们:
datasets: [
{
label: 'pricesData',
fill: false,
lineTension: 0,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: chartColor,
borderWidth: 2,
data: prices
},
{
label: '0 line',
radius: 0,
fill: false,
borderDash: [10,5],
data: zeroLine,
backgroundColor: 'rgba(255,255,255,1)',
borderColor: 'rgba(255, 255, 255,.5)',
},
{
label: 'top Line',
radius: 0,
fill: false,
borderDash: [10,5],
data: topLine,
borderColor: 'rgba(255, 255, 255,0)'
}
我正在尝试创建一个功能,根据您在图形上的位置更改另一个组件中显示的价格。下面是label选项中的回调函数:
callbacks: {
label: function(tooltipItem, data) {
var item = data.datasets[0].data[tooltipItem.index];
var zeroLine = data.datasets[1].data[tooltipItem.index]
let properties = {
price: item,
percentChange: (((item-zeroLine)/zeroLine)*100).toFixed(2)
}
props.parentCallback(properties);
return(item)
}
}
现在,除了它运行三次,并且返回的项目用三个实例填充工具提示之外,它的工作方式与预期的一样。我想这是因为我有三个数据集。我如何防止这种情况,并且只调用一次属性回调,并且只用一个值填充工具提示?还有一个轻微的帧速率故障,我想是由这个引起的。
转载请注明出处:http://www.xjzlzx.com/article/20230522/2448706.html