使用Chart.js仅在折线图的X轴上显示有限数量的标签
1)如何使用chart.js在折线图的X轴上只显示第一个、中间和最后一个或者只显示第一个和最后一个标签(日期)？
2） 此外，如果可能，我只想显示特定数量的垂直网格线。
代码：
var myLineChart = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: reportDate,
datasets:[{
label: 'ABC',
data: abcArray,
backgroundColor:"white",
borderColor: "darkblue",
fill: false,
lineTension: 0,
radius: 5
},{
label: 'DEF',
data: defArray,
backgroundColor:"white",
borderColor: "magenta",
fill: false,
lineTension: 0,
radius: 5
},{
label: 'XYZ',
data: xyzArray,
backgroundColor:"white",
borderColor: "lightgreen",
fill: false,
lineTension: 0,
radius: 5
}]
},
options: {
responsive: true,
scales:{
xAxes:[{
ticks:{
display: true
}
}],
yAxes:[{
gridLines:{
display: false
}
}]
},
tooltips:{
mode:'index'
}
}
});
折线图图像
共有1个答案
这工作完美。
xAxes:[{
ticks:{
display: true,
autoSkip: true,
maxTicksLimit: 4
}
}]
-
注意：即使某些“区域”没有值，也应该显示标签0、0.1、0.2、0.3、0.4和0.5。我尝试了我的不同选项，我发现的“最佳”是控制要显示的标签数量，但它不是我想要的：
-
限制图表.js折线图上的标签数量 在小型设备上显示时，我想“仅”减少折线图的标签数量。从上面的帖子来看，解决方法是这样的； 这是一个很好的解决方案，但我想在桌面上显示时保留所有24个标签。我想在手机上仅显示时隐藏一半的标签。
-
我正在使用chart.js在一个页面上显示多个折线图。然而，只有最后一张图表显示，尽管我称之为“canvas1”和“canvas2”。有些地方一定有冲突，我试过很多东西，但没有任何乐趣。以下是两个图表，仅显示最后一个： 图一 图二： 你的帮助将不胜感激，已经打扰我一段时间了！ 提前谢谢
-
我最近更新了我的charts.js库到最新版本（2.5.0）。这个版本不显示图表上的标签。 我有一个在《小提琴手:http://jsfiddle.net/g6fajwg8》上工作的例子。 但是，我完全按照示例中的方式定义了我的图表，但仍然看不到图表上的标签。 注意：在Google和Stackoverflow上有很多这样的问题，但其中大多数都是关于以前的版本，这些版本在它们上运行良好。
-
我有一个使用的折线图。在这里，我有3个选项来显示他们的数据：所有时间、3个月、1个月。这些都很好用。但问题是，每当用户选择1个月或3个月的数据图并将鼠标光标悬停在图线上时，它就会显示旧数据（所有时间）。 预期结果：图表不再有任何原始数据的痕迹，而是显示新数据，用户可以毫无问题地与之交互。 实际结果：图表显示新数据，但如果用户将鼠标悬停在图表上，它将在原始数据和新数据之间来回闪烁。 这是我的代码：
-
我需要用1整年的数据制作一个图表，但是它有太多的x标签。 我这样做是为了删除一些： 这在一段时间内运行良好，但现在我需要＜code＞工具提示 我正在使用和。