我不确定当将鼠标悬停在图例的相应区域上方时，如何获取极地图表工具提示。我的传奇风格更加传统，并且采用表格格式，因此我通过图例获取工具提示的示例代码并不是很有效。
您可以在行动here
中看到它工具提示有点出现，但不可靠，而不是悬停在桌子的正确部分上。 （我还注意到，当将鼠标悬停在图表本身上时，工具提示似乎有点挑剔。）
这里是代码（我实际上将它用于WP插件，因此js在某些php中）：
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;
}