Chart.js：向表格布局图例添加工具提示

我不知道当鼠标悬停在图例的适当区域时，如何显示极坐标图工具提示。我对图例进行了更严格的样式设计，并且采用了表格格式，因此我找到的通过图例获取工具提示的示例代码不太有效

你可以在行动中看到它

工具提示会出现，但不可靠，而且在将鼠标悬停在表的正确部分时也不会出现。（我还注意到，当鼠标悬停在图表上时，工具提示似乎有点挑剔。）

下面是代码（实际上我正在将其转换为一个WP插件，因此js在一些php中）：

函数显示\u polar\u chartjs\u在报告中（）{
全球$report\U数据；
$report\u polar\u chartjs='1
var trimergencePolarData=[
{
值：'.$report_data['subscale_3']['points'].'，
颜色：“'.$report_data['subscale_3']['color'].”，
突出显示：“'.$report_data['subscale_3']['highlight'].”，
标签：“'.$report_data['subscale_3']['name'].”，
相对级别：“.$report_data['SUBSCRESE_3']['REPARTIVE_level']”，
激活：“'.$report_data['subscale_3']['level']”
},          
{
值：'.$report_data['subscale_2']['points'].'，
颜色：“'.$report_data['subscale_2']['color'].”，
突出显示：“'.$report_data['subscale_2']['highlight'].”，
标签：“'.$report_data['subscale_2']['name']”，
相对级别：“.$report_data['SUBSCRESE_2']['REPARTIVE_level'].”，
激活：“'.$report_data['subscale_2']['level']”
},
{
值：'.$report_data['subscale_1']['points'].'，
颜色：“'.$report_data['subscale_1']['color']”，
突出显示：“'.$report_data['subscale_1']['highlight'].”，
标签：“'.$report_data['subscale_1']['name']”，
relativeLevel:“'.$report_data['subscale_1']['relative_level'].”，
激活：“'.$report_data['subscale_1']['level']”
}
];
window.onload=函数（）{
var ctx=document.getElementById（“polar_chartjs”）.getContext（“2d”）；
window.mytrimergencePolarArea=新图表（ctx）。trimergencePolarArea（trimergencePolarData{
startAngle:3.65，
回答：是的，
scaleOverride：对，
比例：9，
scaleStartValue:5，
刻度宽度：5，
没错，
scaleShowLabels:false，
错误：错误，
动画：没错，
动画步骤：100，
动画片：对，
没错，
动画化：“easeInBounce”，
工具脚本模板：“：共50个”，
legendTemplate:“ul.TrimergencePolarea-legend{list style:none；}.TrimergencePolarea-legend span{height:10px；width:10px；display:inline block；margin right:2px；border radius:3px；}
\124; |/ul>”
});
var legendHolder=document.getElementById（“图例”）；
legendHolder.innerHTML=mytrimergencePolarArea.generateLegend（）；
helpers=Chart.helpers；
//在模块甜甜圈本身之后包含一个html图例模板
helpers.each（legendHolder.firstChild.childNodes，函数（legendNode，索引）{
addEvent（legendNode，“mouseover”，function（）{
var activeSegment=mytrimergencePolarArea.segments[索引]；
activeSegment.save（）；
activeSegment.fillColor=activeSegment.highlightColor；
mytrimergencePolarArea.showTooltip（[activeSegment]）；
activeSegment.restore（）；
});
});
addEvent（legendHolder.firstChild，“mouseout”，function（））{
mytrimergencePolarArea.draw（）；
});
canvas.parentNode.appendChild（legendHolder.firstChild）；
};
';
返回$report\u polar\u chartjs；
}

    function display_polar_chartjs_in_report(){
    global $report_data;
    $report_polar_chartjs = '<script>
                var trimergencePolarData = [
                        {
                            value: '.$report_data['subscale_3']['points'].',
                            color: "'.$report_data['subscale_3']['color'].'",
                            highlight: "'.$report_data['subscale_3']['highlight'].'",
                            label: "'.$report_data['subscale_3']['name'].'",
                            relativeLevel: "'.$report_data['subscale_3']['relative_level'].'",
                            activation: "'.$report_data['subscale_3']['level'].'"
                        },          
                        {
                            value: '.$report_data['subscale_2']['points'].',
                            color: "'.$report_data['subscale_2']['color'].'",
                            highlight: "'.$report_data['subscale_2']['highlight'].'",
                            label: "'.$report_data['subscale_2']['name'].'",
                            relativeLevel: "'.$report_data['subscale_2']['relative_level'].'",
                            activation: "'.$report_data['subscale_2']['level'].'"

                        },
                        {
                            value: '.$report_data['subscale_1']['points'].',
                            color: "'.$report_data['subscale_1']['color'].'",
                            highlight: "'.$report_data['subscale_1']['highlight'].'",
                            label: "'.$report_data['subscale_1']['name'].'",
                            relativeLevel: "'.$report_data['subscale_1']['relative_level'].'",
                            activation: "'.$report_data['subscale_1']['level'].'"

                        }
                    ];

                    window.onload = function(){
                        var ctx = document.getElementById("polar_chartjs").getContext("2d");
                        window.mytrimergencePolarArea = new Chart(ctx).trimergencePolarArea(trimergencePolarData, {
                            startAngle: 3.65,
                            responsive:true,
                            scaleOverride:true,
                            scaleSteps:9,
                            scaleStartValue:5,
                            scaleStepWidth:5,
                            animateScale : true,
                            scaleShowLabels:false,
                            segmentShowStroke : false,
                            animation : true,
                            animationSteps : 100, 
                            animateRotate : true, 
                            animateScale : true, 
                            animationEasing: "easeInBounce",
                            tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %> out of 50 <%=activation%>",
                            legendTemplate : "<style>ul.trimergencepolararea-legend {list-style:none;} .trimergencepolararea-legend span {height:10px; width:10px; display:inline-block; margin-right:2px; border-radius:3px;}</style><ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%=segments[i].label%> | <%=segments[i].value%> | <%=segments[i].activation%> | <%=segments[i].relativeLevel%></li><%}%></ul>"

                    });
        var legendHolder = document.getElementById("legend");
        legendHolder.innerHTML = mytrimergencePolarArea.generateLegend();
        helpers = Chart.helpers;
        // Include a html legend template after the module doughnut itself
        helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
            helpers.addEvent(legendNode, "mouseover", function(){
                var activeSegment = mytrimergencePolarArea.segments[index];
                activeSegment.save();
                activeSegment.fillColor = activeSegment.highlightColor;
                mytrimergencePolarArea.showTooltip([activeSegment]);
                activeSegment.restore();
            });
        });
        helpers.addEvent(legendHolder.firstChild, "mouseout", function(){
            mytrimergencePolarArea.draw();
        });
        canvas.parentNode.appendChild(legendHolder.firstChild);


                    };



            </script>
            <div id="polar_chartjs_holder" class="uk-grid"><canvas id="polar_chartjs" class="uk-width-1-1"></canvas>
            <div id="legend" class="uk-width-1-1"></div></div>';
            return $report_polar_chartjs;

}