chart.jsのグラフのツールチップにデータを追加する方法

Question

最近、私はchart.jsを使ってグラフのデータベーステーブルからデータを表示する作業をしています。そのグラフのツールチップには2つのデータが表示されていますが、今でもそのツールチップの3番目のデータを結合したいと考えています。

同様：

Jaunary 2016年顧客

2016年の月間contomers：以下は-4.5

損失の15％（第三1）

は現在のためのスナップですグラフ

そしてここにもdbテーブルデータのスクリーンショットここ

である私のコードは

$(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 = []; 

      for(var i in data) { 
       month.push("Customer in " + data[i].apply_month); 
       customers.push(data[i].no_customers); 
      } 
      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 
        } 

       ] 
      }; 

      // alert(chartdata); 

      var frame = $("#mycanvas"); 

      var barGraph = new Chart(frame, { 
       type: 'line',    
       data: chartdata 
      }); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }); 
}); 

ある今、私はこれらのツールチップに第三データを追加することができますどのように、私を提案してください。感謝:)

Answer 1

あなたがツールチップのこの使用afterBodyコールバック関数を実現することができます...

options: { 
    tooltips: { 
     callbacks: { 
     afterBody: function(t, d) { 
      return 'loss 15%'; // return a string that you wish to append 
     } 
     } 
    }, 
    ... 
} 

ここでは、実施例である...

var ctx = document.getElementById("myChart").getContext('2d'); 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], 
 
     datasets: [{ 
 
     label: 'Standard Rating', 
 
     data: [1, 2, 3, 4, 5, 6], 
 
     backgroundColor: 'rgba(209, 230, 245, 0.5)', 
 
     borderColor: 'rgba(56, 163, 236, 1)', 
 
     borderWidth: 1 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     tooltips: { 
 
     callbacks: { 
 
      afterBody: function(t, d) { 
 
       return 'loss 15%'; //return a string that you wish to append 
 
      } 
 
     } 
 
     }, 
 
     scales: { 
 
     yAxes: [{ 
 
      ticks: { 
 
       beginAtZero: true 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="myChart" width="350" height="200"></canvas>