我有一个折线图,我的数据是目前设置,但我需要做一个自定义标签的框显示时,光标在点。我得到一个对象发送到我的图表,其中有3个键,每个键代表一个数组,实际上这是数组:
{"labels":["March","April","May","June","July","August"],
"subscriptions":[{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1,"1x java ditor 1 (seanca)":1},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":7,"1x java ditor 1 (seanca)":2},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":6,"1x java ditor 1 (seanca)":21},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1,"1x java ditor 1 (seanca)":3},{"3x java 6 mujor 123123 (seanca)":1,"3x java mujor 12 (seanca)":1},{"1x java ditor 1 (seanca)":4,"3x java mujor 12 (seanca)":2}],
"quantity":[3,10,28,5,2,6]}
我已经将data.quantity发送到dataset的data,将data.labels发送到dataset的labels。对于数据。订阅,我已经将其发送到悬停标签的工具提示中。密码在下面。这个标 checkout 现,但我想列出他们在对方,但“\n”不工作,在这一部分。有什么我应该添加的东西使它成为可能吗?
function generateMonthFrequentationsLinearChart(data) {
let monthLineChartData = {
labels: data.labels,
datasets: [{
label: "# abonime",
backgroundColor: [
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)'
],
borderWidth: 1,
data: data.quantity
}],
tooltipText: data.subscriptions,
};
let ctxL = $('#lineChart');
monthFrequentationLineChart = new Chart(ctxL, {
type: 'line',
data: monthLineChartData,
options: {
responsive: true,
legend: {
display: true,
},
title: {
display: true,
text: 'Line Chart'
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var array = data.tooltipText[tooltipItem.index];
var label = "";
for (var text in array){
label += text + ": " + array[text] + '\n |';
}
label = label.slice(0, -1);
return label;
},
title: function (context, tooltipItem) {
return context[0].xLabel + " Total: " + context[0].yLabel;
}
},
displayColors: false,
hasIndicator: true,
intersect: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
我已经做了这个代码的工具提示,我得到的数据,但他们没有出现列出
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var array = data.tooltipText[tooltipItem.index];
var label = "";
for (var text in array){
label += text + ": " + array[text] + '\n |';
}
label = label.slice(0, -1);
return label;
},
title: function (context, tooltipItem) {
return context[0].xLabel + " Total: " + context[0].yLabel;
}
},
displayColors: false,
hasIndicator: true,
intersect: false
}
它们看起来是这样的:3x java 6 mujor 123123(seanca):1| 3x java mujor 12(seanca):1| 1x java ditor 1(seanca):1作为一行。
1条答案
按热度按时间kgsdhlau1#
这里你可以做的是,而不是为标签构建字符串,你可以构建数组,然后简单地返回它。这就是标签回调的样子。