如何在chart.js的图表工具提示中附加更多数据

用户7596515

最近,我正在使用chart.js. 在该图形工具提示中,显示了 2 个数据但现在我还想在该工具提示中组合第三个数据。

喜欢:

2016年1月客户

2016 年每月消费者:-4.5

损失 15%(第三个)

下面是当前图表的快照 在此处输入图片说明

这里也是一个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);
        }
    });
});

现在请建议我,我如何在这些工具提示中附加第三个数据。谢谢 :)

ɢʀᴜɴᴛ

您可以使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何隐藏图表工具提示的标题?

图表js工具提示如何控制显示的数据

如何在工具提示模板中使用剑道图表数据?

如何在Google图表中控制X轴工具提示?

如何在chart.js中向图表添加平移?

如何在浮动图表中设置工具提示文字的颜色?

如何在react-highcharts中使用图表工具提示格式化程序?

如何在MS图表中显示带有各种数据的工具提示

如何在Google图表的图例中添加工具提示

如何在特定数据标签上的chart.js中隐藏工具提示?

Chart.js如何在工具提示上显示%

如何显示图表js中位于同一轴上的所有数据的工具提示值?

如何使用日期(DateTime格式)创建图表工具提示

[MIXED CHART.JS]如何操作每个图表工具提示的标签?

如何在Chart.js图表中设置数据项之间的差距

如何在chart.js中的图例项上显示工具提示

如何在图表工作表Excel VBA中更改图表的源数据

如何在反应“图表”中自定义工具提示数据?

在d3 js中,如何在圆上附加其他文本作为工具提示

如何设置图表工具提示的模板文件?

如何在Chart JS中显示货币

如何在Chart.JS中逗号化提供给图表的数据值?

使用JSON数据时,如何在Google图表中创建工具提示html?

当工具提示合并多个系列的数据时,如何以编程方式显示我的图表工具提示?(同步图表)

如何在chart.js中循环tooptip附加数据

如何在烛台 HighChart 工具提示中嵌入更多数据?

如何在 bar chart.js 中的工具提示中显示一个以上的值?

如何在 Chart.js 中对工具提示值进行排序

如何在图表 js 工具提示中显示小数字?