Поместите диаграмму 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>'; 
    } 
    }); 

Когда «холст» находится под и отображается на html, он отлично работает. Но он не отображается внутри javascript tooltip, когда я возвращаю содержимое всплывающей подсказки с div.

Answer 1

Вам нужно создать элемент холста, прежде чем вы назовете 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> 

---