如何将X轴上的标签移动到另一个X轴标签之间。似乎没有任何操作,而且我在文档上找不到任何内容。有解决方法吗?我使用的是折线图时间序列。https://www.chartjs.org/samples/latest/scales/time/financial.html
目前,与代码我有其生成下图:
var cfg = {
elements:{
point: {
radius: 4
}
},
data: {
datasets: [
{
label: 'vsy',
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
borderColor: window.chartColors.red,
data: firstData,
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
},
{
label: 'de vsy',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: dataMaker(15),
type: 'line',
pointRadius: 2,
fill: false,
lineTension: 0,
borderWidth: 2
}
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
time: {
unit: 'month',
displayFormats: {
month: 'MMM'
}
},
ticks: {
autoSkip: true,
autoSkipPadding: 75,
sampleSize: 100
},
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
}
}
};
这就是我现在所拥有的:
我希望X轴上的标签位于中心而不是Y轴网格线的下方。
感谢uminder,他的评论解决了这个问题,但现在我有一个冲突的工具提示,躺在同一个网格。当我悬停到四月线的第一个点,它显示我mar 30,就在它上面,反之亦然。
我通过将模式更改为nearest
修复了它,但为什么它会激活另一个点?
2条答案
按热度按时间kgsdhlau1#
您正在寻找的选项是
offsetGridLines
。如果为
true
,则网格线将移动到标签之间。在大多数情况下,这会产生预期的结果。不幸的是,它不适用于Chart.js issue #403中记录的时间轴。多亏了Antti Hukkanen,才有了workaround。
请看一下下面的可运行代码片段,看看它是如何工作的。
第一个
2ul0zpep2#
对于chartJs v3,您可以使用
offset
属性: