[英]Put chart.js chart inside JQuery tooltip?
我想在工具提示中顯示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>';
}
});
當“畫布”位於下方並顯示在html上時,它可以正常工作。 但是,當我使用div返回工具提示的內容時,它無法在工具提示javascript中顯示。
您需要先創建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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.