在ChartJS中将项目添加到TooltipItems []不会更新labelColors

问题描述

我一直试图在ChartJS中的单个工具提示上显示所有数据集的信息，总是获得一个更接近用户悬停的当前时间索引的数据点。为此，我编写了一个函数，可以在其中添加/修改工具提示项到tooltipItems数组：

var bodyCallback = function(labels,chart) {
        console.log(this);
        var drawnDatasets = labels.map(x => x.datasetIndex);
        var masterSet = labels[0].datasetIndex;
        var stringDate = labels[0].xLabel.substring(0,23);
        var masterDate = new Date(stringDate);
        var index = 1;

        for (var i = 0; i < chart.datasets.length; i++)
        {
            if(i != masterSet)
            {
                var closest = closestDateValue(masterDate,chart.datasets[i].data.map(x => x.x));
                if(drawnDatasets.includes(i)){
                    labels[index].yLabel = chart.datasets[i].data[closest].y;
                    labels[index].x = labels[0].x;
                    labels[index].y = labels[1].y;
                    index++;
                } else {
                    labels.push({datasetIndex: i,index: closest,label: chart.datasets[i].data[closest].x.toString(),value: chart.datasets[i].data[closest].y.toString(),x: labels[0].x,xLabel: labels[0].xLabel,y: labels[0].y,yLabel: chart.datasets[i].data[closest].y});           
                }
            }
        }
    };

该功能正常运行并符合预期，因为禁用了“ displayColors”，所有工具提示项都会完美显示，但是，一旦启用颜色，此回调函数便无法执行预期的目的，因为labelColors仅包含与先前显示的颜色有关的颜色tooltipItems数组中的元素（在添加任何新元素之前）。

结果是一个例外：“未捕获的TypeError：无法访问属性“ borderColor”，labelColors [o]未定义”，其中o是新添加的tooltipItem的索引。我试图找到一种直接修改labelColors而不弄乱ChartJS代码的方法，但是我没有运气，因为大多数与labelColors相关的方法都是私有的。

新tooltipItem的结构正常，没有颜色的情况下工作正常，只有在启用它们时才会中断。

使用labelColor回调也不起作用，它只会影响添加新项目之前存在的项目。

是否可以修改plugin.tooltip.js中存在的labelColors数组，还是可以更好地自定义应在工具提示中显示哪些工具提示项？

预先感谢

解决方法

我能够通过创建自定义工具提示功能并保留原始功能来进行补救，以便可以访问labelColor

var customTooltip = function(tooltip) {
                        if(tooltip.dataPoints != undefined){
                        var i;
                        for(i = 1; i < tooltip.dataPoints.length; i++){
                                tooltip.labelColors.push({
                                backgroundColor: tooltip.dataPoints[i].backgroundColor,borderColor: tooltip.dataPoints[i].borderColor
                                });
                        }
                        }
                };