2017-06-08 8 views
1

ここには、x軸のデータとdbテーブルのcomであるy軸のデータが含まれています。そして今私は問題が直面している、どこでも私はツールチップのafterbodyコールバック関数でこの3番目のデータを追加しようとしています。各ツールチップのデータ全体が表示されます。chart.jsの余分なデータをループする方法

しかし、私はそれぞれのツールチップにこれらのデータを追加したいと思います。

等:第1工具先端マージン12%

2工具先端マージン3工具先端マージン25%などから5%

。ここで

は、ツールチップのデータ

enter image description here

そして、ここで現在のグラフからのスクリーンショットである私のコードは

$(document).ready(function(){ 
    $.ajax({ 
     url: "<?php base_url();?>/charts/getsome", 
     method: "GET", 
     success: function(data) { 
      console.log(data); 
      var data = JSON.parse(data); 
      var month = []; 
      var customers = []; 
      var margin = []; 

      for(var i in data) { 
       month.push("Customer in " + data[i].apply_month); 
       customers.push(data[i].no_customers); 
       margin.push(data[i].margin); 
      } 
      var chartdata = { 
       labels: month,    
       datasets : [ 
        { 
         label: 'monthly customers for Year 2016', 
         backgroundColor: 'rgba(200, 200, 200, 0.75)', 
         borderColor: 'rgba(200, 200, 200, 0.75)', 
         hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
         hoverBorderColor: 'rgba(200, 200, 200, 1)', 
         data: customers, 
         fill: false 
        } 

       ] 

      }; 

      var frame = $("#mycanvas"); 

      var barGraph = new Chart(frame, { 
       type: 'line',    
       data: chartdata, 
       options: { 
          responsive: true, 
          tooltips: { 
          callbacks: { 
           afterBody: function(t, d) { 
            return 'margin '+margin; 
           } 
          } 
          } 
         } 
      }); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }); 
}); 

ある今、私はちょうどこれらの利益率を示すにしたいですデータを各ツールチップごとに個別に表示します。どうか私は間違っていると私に示唆してください?

答えて

0

:)事前に感謝を...

ꜰʀᴏᴍᴛʜɪꜱ

tooltips: { 
    callbacks: { 
     afterBody: function(t, d) { 
     return 'margin ' + margin; 
     } 
    } 
} 

ᴛᴏᴛʜɪꜱ

tooltips: { 
    callbacks: { 
     afterBody: function(t, d) { 
     return 'margin ' + margin[t[0].index]; 
     } 
    } 
} 
+1

その作業をツールチップafterBodyコールバック関数を交換してください。ありがとう:) –

関連する問題