为了账号安全,请及时绑定邮箱和手机立即绑定

如何防止 Chartjs 工具提示回调返回相同值的多个实例?

如何防止 Chartjs 工具提示回调返回相同值的多个实例?

白衣染霜花 2023-06-09 17:44:33
我正在使用带有 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)'        }我正在尝试创建一项功能,根据您在图表上的位置更改另一个组件中显示的价格。这是标签选项中的回调函数: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)                }            }现在这像预期的那样工作,除了它运行三次并且返回的项目用三个实例填充工具提示。我想这是因为我有三个数据集。我将如何防止这种情况并且只调用一次道具回调并只用一个值填充工具提示?还有一个轻微的帧速率故障,我想这是由此引起的。
查看完整描述

1 回答

?
慕的地8271018

TA贡献1796条经验 获得超4个赞

对于有类似问题的任何人,您可以使用此选项配置工具提示,以便它只使用一个数据集:


tooltips: {

filter: function (tooltipItem) {

    return tooltipItem.datasetIndex === 0;

}

}


查看完整回答
反对 回复 2023-06-09
  • 1 回答
  • 0 关注
  • 98 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信