将 chart.js 图表放在 JQuery 工具提示中？

Question

我想在工具提示中显示 chart.js 的条形图。这可能吗？

$(function() {
   $( document ).tooltip({
     track: true,
     content:function () {var temp = $(this).prop('title');
            temp = theBigArray[temp] //THIS IS THE JSON DATA CONTAINER FOR EACH SENTENCE

            var barChartData = {
                labels : ["Future","Present","Past"],
                datasets : [
                    {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,0.8)",
                        highlightFill : "rgba(151,187,205,0.75)",
                        highlightStroke : "rgba(151,187,205,1)",
                        data : [temp[2], temp[3], temp[4]]
                    }
                ]

            }
            var ctx = document.getElementById("canvas").getContext("2d");
            var myTable = new Chart(ctx).Bar(barChartData, {
                responsive : false
            });
            return  '<canvas id="canvas"></canvas>';
    }
  });

当"canvas"在下，显示在html上时，效果很好。但是，当我 return 带有 div 的工具提示内容时，它无法在工具提示 javascript 中显示。

Answer 1

您需要先创建 canvas 元素，然后再对其调用 getElementById。此外，canvas 元素需要调整大小才能使 Chart.js 正常工作。

使用这个

$(function() {
    $( document ).tooltip({
        track: true,
        open: function (event, ui) {
            $('.ui-tooltip-content > div').append($("#canvas"))
        },
        content: function () {
            var temp = $(this).prop('title');
            var temp = theBigArray[temp] //THIS IS THE JSON DATA CONTAINER FOR EACH SENTENCE

            var barChartData = {
                labels: ["Future", "Present", "Past"],
                datasets: [
                    {
                        fillColor: "rgba(151,187,205,0.5)",
                        strokeColor: "rgba(151,187,205,0.8)",
                        highlightFill: "rgba(151,187,205,0.75)",
                        highlightStroke: "rgba(151,187,205,1)",
                        data: [temp[2], temp[3], temp[4]]
                    }
                ]
            }

            $('body').append($("<canvas id='canvas' width='200' height='100'></canvas>"))
            var ctx = document.getElementById("canvas").getContext("2d");
            var myTable = new Chart(ctx).Bar(barChartData, {
                responsive: false,
                animation: false
            });

            return '<div></div>';
        }
    })
});

和CSS

<style>
    body > #canvas {
        position: fixed;
        visibility: hidden;
    }
</style>

将 chart.js 图表放在 JQuery 工具提示中？

Put chart.js chart inside JQuery tooltip?

javascript

jquery

chart.js