I would like to display chart.js's bar chart inside a tooltip. Is this possible?
$(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>';
}
});
When "canvas" is under , and displayed on html, it works fine. But, it fails to show inside the tooltip javascript when I return the content of the tooltip with div.
You need to create the canvas element before you call getElementById on it. Also, the canvas element needs to be sized for Chart.js to work properly.
Use this
$(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>';
}
})
});
with CSS
<style>
body > #canvas {
position: fixed;
visibility: hidden;
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.