Chart.js show tooltips on page load

问题

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")
        });
    }

});

回答1:

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.

来源：https://stackoverflow.com/questions/28720713/chart-js-show-tooltips-on-page-load

标签

javascript

chart.js