gpt4 book ai didi

jquery - 如何在 Chart.js 中的图形工具提示中附加更多数据

转载 作者:行者123 更新时间:2023-12-01 08:43:29 24 4
gpt4 key购买 nike

最近我致力于使用 chart.js 在图表中显示数据库表中的数据。在该图形工具提示中,显示了 2 个数据,但现在我还想在该工具提示中合并第三个数据。

喜欢:

2016年1月客户

2016 年月度消费者:-4.5

损失15%(第三次)

下面是当前图表的快照 enter image description here

这里还有一个数据库表数据截图

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

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>

关于jquery - 如何在 Chart.js 中的图形工具提示中附加更多数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44427411/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com