我正在使用http://www.chartjs.org/显示饼图，但似乎无法弄清楚如何在页面加载时显示工具提示。
$(document).on('ready page:load', function() {
Chart.defaults.global.tooltipEvents = ['click', 'mousemove', 'window.onload'];
Chart.defaults.global.customTooltips = function(tooltip) {
var text = tooltip.text;
var tooltipEl = $('#chartjs-tooltip');
if(!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
if(text) {
var id = text.split(":")[0].replace(/ /g, '-').toLowerCase();
$('.tip-text').addClass('hide');
$('#'+id+'-tip').removeClass('hide').show();
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text.split(":")[0]);
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
}
var body = $('body');
if(body.is(".home")) {
var ctx1 = $("#custom-research-chart").get(0).getContext("2d");
var data = [
{
value: 250,
color:"#7ad3f7",
highlight: "#7ad3f7",
label: "GROWTH OVER TIME",
labelColor: "white",
labelFontSize: "16"
},
{
value: 250,
color:"#9e062e",
highlight: "#9e062e",
label: "INNOVATION",
labelColor: "white",
labelFontSize: "16"
},
{
value: 250,
color:"#577e7e",
highlight: "#577e7e",
label: "DEVELOPMENT",
labelColor: "white",
labelFontSize: "16"
},
{
value: 250,
color:"#f28d1e",
highlight: "#f28d1e",
label: "MARKET RESEARCH",
labelColor: "white",
labelFontSize: "16"
},
];
var customResearch = new Chart(ctx1).Doughnut(data);
$('.various').fancybox({
maxWidth : 800,
maxHeight : 600,
width : '70%',
height : '70%',
openEffect : 'none'
});
$.force_appear();
$(document.body).on('appear', '#alicia', function(e, $affected) {
console.log("HEY")
});
}
});
一种快速的方法是关闭工具提示（这样，当鼠标悬停在图表上时，图表不会重绘），然后关闭动画（这样，图表在重绘时不会再次从图表上擦除工具提示）。然后，您可以手动调用将showTooltip传递给的图表方法segments。
如果要保留动画，则需要在动画结束时有一个侦听器，但我似乎找不到关于该事件被触发的任何文档（它可能不存在）
var data = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}]
//canvases
var chart = document.getElementById("chart").getContext("2d");
//charts
var myChart = new Chart(chart).Doughnut(data, {
animation:false,
showTooltips: false,
});
myChart.showTooltip(myChart.segments);<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="chart"></canvas>这是一种快速的方法，因为它不能很好地控制工具提示的位置，如果饼中有很多数据，它们可能会重叠。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句