Chart.js在页面加载时显示工具提示 [英] Chart.js show tooltips on page load

问题描述

我正在使用 http://www.chartjs.org/ 显示饼图，但是可以似乎不知道如何在页面加载时显示工具提示。

I am using http://www.chartjs.org/ to display a pie chart but can't seem to figure out how to display the tooltips on page load.

$(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 方法，并向其传递段。

A quick way to do this is to turn tooltips off (so that the chart does not redraw when the mouse is over it) and turn animation off (so that again the chart does not wipe the tool tips off the chart when being redrawn). Then you can manually call the showTooltip method of the chart passing it the segments.

如果要保留动画，则需要在动画结束时有一个侦听器，但我找不到；似乎找不到关于该事件被触发的任何文档（它可能不存在）

If you want to keep animations you would need to have a listener for the end of the animation but i can;t seem to find any documentation on that event being fired (it may not exist)

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>

这是一种快速的方法，因为它不能很好地控制工具提示的位置，如果饼中有大量数据，它们可能会重叠。

This is a quick way as it doesn't give much control on the position of the tool tips and if you have a lot of data in your pie they may overlap.

这篇关于Chart.js在页面加载时显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！