Chart.js显示页面加载时的工具提示

Chart.js show tooltips on page load

本文关键字：工具提示加载 js 显示 Chart 更新时间：2024-05-05

我正在使用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>

这是一种快速的方法，因为它不能对工具提示的位置进行太多控制，如果你的饼图中有很多数据，它们可能会重叠。