我有一个使用Laravel的PHP应用程序,我必须将两个数组加入一个图表中。两者均显示每月数量。我可以为文档中的正常用例写一个标签,但是这两行不一定包含相同的月份数,因此我想将每个y轴数字与其特定的月份标签关联起来。
var ctx = document.getElementById('flujomes');
var entregas = @json($ar_entregas);
var reversas = @json($ar_reversas);
console.log(entregas);
console.log(reversas);
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Número de entregas",
data: entregas,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
],
borderWidth: 1
},
{
label: "Número de reversas",
data: reversas,
backgroundColor: [
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
responsive: true,
maintainAspectRatio: false,
}
});
但是它没有按我预期的那样工作:
所以chart.js会拾取数据,但它不知道x点实际在哪里。
答案 0 :(得分:3)
问题在于该库不知道由谁来处理您提供的x
值,只有在使用线性轴(数值数据)的情况下,它才能正确执行此操作选项。
有两种解决方法,
category
轴由于您知道将在标签上显示的值,因此可以使用type: 'category'
来设置它们,因此库知道正确放置点的位置,如以下示例所示:
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "Data 1",
data: [{
x: '2018-2',
y: 98
}, {
x: '2018-4',
y: 74
}, {
x: '2018-5',
y: 52
}],
}, {
label: "Data 2",
data: [{
x: '2018-3',
y: 25
}, {
x: '2018-5',
y: 52
}],
}]
},
options: {
scales: {
xAxes: [{
type: 'category',
labels: ['2018-2', '2018-3', '2018-4', '2018-5']
}]
},
tooltips: {
mode: 'x',
callbacks: {
title: function(tooltipItems, data) {
let tI = tooltipItems[0];
return data.datasets[tI.datasetIndex].data[tI.index].x;
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
另一种可能的解决方案是将标签从文本转换为Date()
的时刻moment("2018-2")
,然后将min
和max
设置为ticks
的值,以及显示格式,例如:
xAxes: [{
type: 'time',
time: {
displayFormats: {
quarter: 'YYYY-MM'
}
}
}]
总体而言,这是一个更复杂的解决方案。
如前所述,第一种解决方案将导致当用户将鼠标悬停在某个点上时,工具提示的标题将与x
标签不同,这是因为该点带有错误的index
值(这是因为index
用于返回标签位置。
在尝试解决此问题时,由于Scatter
图表产生的结果与我们试图实现的结果类似,因此我锁定了here类型的控制器,但是没有运气,因为在这种情况下,或者标题被忽略或值也错误。
所以我想到的是这样的:
tooltips: {
mode: 'x', // optional
callbacks: {
title: function(tooltipItems, data) {
let tI = tooltipItems[0];
return data.datasets[tI.datasetIndex].data[tI.index].x;
}
}
}
基本上,它不会获取标签数组中的索引,而是会获得原始的x
数据值。