如何循环tooptip chart.js中的其他数据

时间:2017-06-08 06:54:38

标签: jquery graph chart.js

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

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

像:

第一个工具提示 保证金12%

第二个工具提示 保证金5%

在第3个工具提示保证金25%,依此类推。

以下是使用工具提示数据的当前图表的屏幕截图

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

现在我只想分别为每个工具提示显示这些保证金百分比数据。请建议我,我哪里出错了?在此先感谢:)

1 个答案:

答案 0 :(得分:1)

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

ꜰʀᴏᴍᴛʜɪꜱ

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

ᴛᴏᴛʜɪꜱ

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