Colors 如何为Chart.js工具提示标签设置颜色

在Chart.js中，我无法为工具提示设置颜色。我希望标签“2016年12月”的颜色与图例的颜色（蓝色）相同

请参阅下文

graphOptions.tooltips = {
                    enabled: true,
                    mode: 'single',
                    displayColors: false,
                    callbacks: {
                        title: function (tooltipItem, data) {
                            if (tooltipItem.length > 0) {
                                return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans";
                            }
                            return "";
                        },
                        label: function (tooltipItem, data) {
                            if (data.datasets.length > 0) {
                                return data.datasets[tooltipItem.datasetIndex].label;
                            }
                            return '';
                        },
                        labelColor: function (tooltipItem, chartInstace) {
                            if (data.length > 0) {
                                return data[tooltipItem.datasetIndex].backgroundColor;
                            }
                        }
                    }
                };

---

实际上，问题是在labelColor回调中返回背景色。下面是上述回调方法的正确返回类型

function (tooltipItem, chartInstance) {
                return {
                    borderColor: borderColor,
                    backgroundColor: backgroundColor
                };
            }

在BackgroundColor中指定标签的颜色。您可以保留边框颜色

[示例代码]

labelColor : function(tooltipItem, chartInstance){
                    return {
                        backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0]
                    };
                }

---

“tooltipItem”不存在，拼错了最后的“s”。因此，您的代码应该是

labelColor : function(tooltipItem, chartInstance){
    return {
        backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0]
    };
}

---

您尚未在

labelColor

回调函数中定义任何名为

data

的内容。charts.js中此回调的另一个混淆之处是传递给labelColor回调函数的第二个参数是图表实例，而不是像其他一些chartjs回调那样的数据集

无论如何，这应该行得通

    labelColor: function(tooltipItem, chart) {
        var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
        return {
            backgroundColor : dataset.backgroundColor
        }
    }

---

您可能希望尝试使用labelTextColor而不是labelColor

这是自Chartjs 2.7以来可用的功能

---

（Feature#4199）

实际上，如果数据集颜色只是一个项目而不是一个数组，则不需要额外的工具提示回调，例如

单色显示为工具提示中自动显示的颜色 而不是

与工具提示中显示的颜色不一致的颜色数组 根据屏幕截图，只有一个数据集匹配一种颜色，因此不需要将颜色作为数组。如果需要使用不同的颜色在同一数据集中设置多个点，则应使用

分布到每个数据点的颜色数组 但是你应该忘记这个解决方案，而采用上面给出的解决方案

PS：对于边框和背景色，您可以使用hexa、rbg或字符串符号

希望有帮助：）

---

只需键入您的图表标签，如“金额”，然后修改手中的颜色

这个问题在前一段时间提出过，但。。。你知道为什么这行不通吗？如果我在

工具提示{…}

中设置背景色，那么我可以设置背景色，但是在回调中使用函数不会做任何事情，即使我硬编码了特定的颜色。。有什么想法吗？

data

怎么没有定义？工具提示没有labelTextColor属性。。我认为合适的选择应该是bodyFontColor。现在有了Chartjs 2.7（功能#4199）

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // this will show the tooltip with red color
    backgroundColor: '#e23944',
    borderColor: 'blue'
}

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // need to remove the array of color here
    backgroundColor: ['#e23944'],
    borderColor: ['blue']
}

const myDataset = {
    label: 'My dataset',
    data: [1,2.3,4,-5],
    fill: true,
    // need to remove the array of color here
    backgroundColor: ['#e23944', '#D4E157', '#26A69A', '#758BE2'],
    borderColor: ['blue', 'green', 'white', 'dark']
}

labelTextColor: function(tooltipItem, chart) {
   if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount") 
      {
           return "#1ff368";
       }
   if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
                return "#8577ec";
              }
            }