把JQuery工具提示中的chart.js圖表​​？

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上，它工作正常。但是，當我使用div返回工具提示的內容時，它無法在工具提示javascript中顯示。

Answer 1

您需要在調用getElementById之前創建canvas元素。另外，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> 

---