Chart.js V2.0.2版本折线图tooltips提示框不显示及控制台报错排查

问题诱因 #

• 核心原因：你使用的 Chart.js v2.0.2 版本不支持8位十六进制颜色值（#RRGGBBAA格式），你的代码中所有backgroundColor、pointBorderColor都用了#1C154A16、#36388A16这类带透明度后缀的8位十六进制写法，该版本的颜色解析器无法识别该格式，解析过程抛出异常直接中断了 tooltip 的渲染逻辑，导致提示框无法正常显示。
• 次要兼容问题：Chart.js v2 版本已经将 v1 中的 tooltip label 模式更名为index模式，旧的label配置属于遗留写法，虽然不是直接报错的原因，但也存在兼容风险。

修复方案 #

步骤1：替换所有8位十六进制颜色为rgba格式 #

8位十六进制的最后两位是透明度值，你可以将其换算为0-1区间的小数，和6位颜色对应RGB值组合为rgba写法即可：
比如#1C154A16中，前6位1C154A对应RGB值为rgb(28,21,74)，最后两位16换算为十进制是22，透明度为22/255 ≈ 0.086，最终替换为rgba(28,21,74, 0.086)即可。
修改后的LineUserData示例：

LineUserData = {
    labels: ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
    datasets: [
        {
            "label":"Loja 2",
            "backgroundColor":"rgba(28, 21, 74, 0.086)",
            "borderColor":"#1C154A",
            "borderWidth":0,
            "pointBorderColor":"rgba(28, 21, 74, 0.086)",
            "pointBackgroundColor":"#1C154A",
            "data":[0,12,0,2,1,0,1,0,0,0,0,0]
        },
        {
            "label":"Sem Vendedor",
            "backgroundColor":"rgba(54, 56, 138, 0.086)",
            "borderColor":"#36388A",
            "borderWidth":0,
            "pointBorderColor":"rgba(54, 56, 138, 0.086)",
            "pointBackgroundColor":"#36388A",
            "data":[0,0,0,0,0,0,0,0,0,0,0,0]
        }
    ],
}

步骤2：修正tooltip mode配置 #

将初始化代码中的tooltip模式改为v2支持的index：

function initializeLineChart() {
    var graph = document.getElementById('LineChart').getContext('2d');
    var chart = new Chart(graph, {
        type: "line",
        data: LineUserData,
        options: {
            tooltips: {
                mode: 'index'
            }
        }
    });
}

做完以上两步后tooltip即可正常渲染。

内容的提问来源于stack exchange，提问作者Inês Borges