如何循环以添加chart.js中的其他数据 [英] How to loop tooptip additional data in chart.js

问题描述

这里我有一个图表，其中包含来自db表的com的x轴数据和y轴数据。现在我面临的一个问题是，无论我试图在tooltip中的 afterbody 回调函数中附加第三个数据。它会在每个工具提示中显示整个数据。

但是我想分别在每个工具提示中追加这些数据。

类似于：

第二个工具提示上的b

第三个工具提示上的保证金5％

保证金25％等等。

下面是一个带有工具提示数据的当前图形截图。

这里是我的代码

  $（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 = {
标签：月份，
数据集：[
 {
标签：'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 =新图表（frame，{
 type：'line'，
 data：chartdata，
 options：{
 responsive：true， 
 tooltips：{
 callbacks：{
 afterBody：function（t，d）{
 return'margin'+ margin; 
} 
} 
} 
} 
}）; 
}，
错误：function（data）{
 console.log（data）; 
} 
}）; 
}）; 
  

现在我只想为每个工具提示分别显示这些保证金百分比数据。请建议我，我哪里错了？ ）

解决方案

替换您的工具提示' afterBody 回调函数...

ꜰʀᴏᴍꜱꜱꜱ

<$ p
回调：{
afterBody：function（t，d）{
return'margin'+ margin;
}
}
}

ᴛᴏᴛʜꜱꜱ

 工具提示：{
 callbacks：{
 afterBody：function（t，d）{ 
 return'margin'+ margin [t [0] .index]; 
} 
} 
} 
  

Here i have a graph which contains x-axis data and y-axis data which are com from db table. and now i am facing a problem is that, wherever i trying to append this 3rd data in afterbody callback function in tooltip. it will shows entire data in each and every tool tip.

But i want to append these data in each tool tip respectively.

like:

on 1st tool tip margin 12%

on 2nd tool tip margin 5%

on 3rd tool tip margin 25% and so on.

Here is a screen shot from current graph with tool tip data

And here is my code

    $(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);
        }
    });
});

Now i just want to showing these margin percentage data separately for each tool tip. Please suggest me, where i am going wrong? Thanks in Advance :)

解决方案

Replace your tooltip­'s afterBody callback function ...

ꜰʀᴏᴍ ᴛʜɪꜱ

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

ᴛᴏ ᴛʜɪꜱ

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

这篇关于如何循环以添加chart.js中的其他数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！