ApexCharts：隐藏图表中的每N个标签

我想从我用ApexCharts.js制作的图表中隐藏一些标签。我来自FrappéCharts，它有一个叫做“连续性”的功能。如果标签不合适，它允许你隐藏标签，因为该图表是一个timeseries图表

我的ApexChart看起来像这样：

我想删除许多日期，但仍将它们显示在工具提示中。我可以在FrappéCharts中这样做，看起来是这样的：

以下是我的Apex图表代码：

var选项={
图表：{
动画：{enabled:false}，
工具栏：{show:false}，
缩放：{enabled:false}，
键入：“行”，
身高：400，
fontFamily:“PT Sans”
},
笔划：{
宽度：2
},
主题：{
单色：{
启用：对，
颜色：“#800000”，
沙德托：“光”，
阴影强度：0.65
}
},
系列：[{
名称：'每日新增病例'，
数据：[2,0,0,0,0,0,0,1,0,1,0,7,1,1,1,8,0,11,2,9,8,21,17,28,24,20,38,39,36,21,10,49,45,44,52,74,31,29,43,28,39,58,30,47,50,31,28,79,39,54,55,33,42,39,41,52,25,30,37,26,30,35,42,64,46,25,35,45,56,45,64,34,34,32,40,65,56,64,55,37,61,51,70,81,76,64,71,61,56,52,106,108,104,33,57,82,71,67,68,63,71,32,70,65,98,52,72,87,66,85,90,47,164,123,180,119,85,66,122,65,155,191,129,144,175,224,234,240,128,99,141,131,215,228,198,152,126,201,92,137,286,139,236,238,153,170,106,61]
}],
标签：[“二月二十八日”、“二月二十九日”、“三月一日”、“三月二日”、“三月三日”、“三月四日”、“三月五日”、“三月六日”、“三月七日”、“三月八日”、“三月九日”、“三月十日”、“三月十一日”、“三月十二日”、“三月十三日”、“三月十四日”、“三月十五日”、“三月十六日”、“三月十七日”、“三月十八日”、“三月十九日”、“三月二十日”、“三月二十一日”、“三月二十二日”、“三月二十三日”、“三月二十四日”、“三月二十五日”、“三月二十六日”、“三月二十七日”、“三月二十八日”、“三月三十日”“3月31日”、“4月1日”、“4月2日”、“4月3日”、“4月4日”、“4月5日”、“4月6日”、“4月7日”、“4月8日”、“4月9日”、“4月10日”、“4月11日”、“4月12日”、“4月13日”、“4月14日”、“4月15日”、“4月16日”、“4月17日”、“4月18日”、“4月19日”、“4月20日”、“4月21日”、“4月22日”、“4月23日”、“4月24日”、“4月25日”、“4月26日”、“4月27日”、“4月28日”、“4月30日”、“5月1日”、“5月2日”，“5月9”、“5月10”、“5月10”、“5月10”、“5月9”、“5月9”、“5月9”、“5月10”、“5月10”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月13”、“5月13”、“5月13”、“5月13”、“5 5月3”、“5月3”、“5月7”、“5月7”、“5月9”、“5月10”、“5 5月10”、“5月10”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5 5月11”、“5月11”、“5 5月11”、“5月11”、“5月11”、“5 5月11”、“5 5 5 5 5月11”、“5月11”、“5月11”、“5月11”、“5月11”、“5月13”、“5月12”、“5”、“5月13”、“5 5月13”、“5 5月13”、“5月13”、“5月13”、“5月13”、“5月13”、“5”、“5月13”、“5六月十日，六月e 11’、‘6月12日’、‘6月13日’、‘6月14日’、‘6月15日’、‘6月16日’、‘6月17日’、‘6月18日’、‘6月19日’、‘6月20日’、‘6月21日’、‘6月22日’、‘6月23日’、‘6月24日’、‘6月25日’、‘6月26日’、‘6月27日’、‘6月28日’、‘6月29日’、‘6月30日’、‘7月1日’、‘7月2日’、‘7月3日’、‘7月4日’、‘7月5日’、‘7月6月6月6日’、‘7月6月6日’、‘7月6日’、‘7月7月7月7月7月7月7月7月9日、‘7月10日、7月15日、7月15“7月17日”、“7月18日”、“7月19日”、“7月20日”、“7月21日”、“7月22日”、“7月23日”、“7月24日”]，
xaxis：{
工具提示：{已启用：错误}
},
}
var图表=新的ApexCharts（document.querySelector（“图表”），选项）；
chart.render（）；

您可以尝试两种方法

xaxis:{
键入：“日期时间”，
}

您可以将

x轴

转换为日期时间，标签将如下所示对齐

或

可以使用停止x轴标签的旋转

xaxis:{
标签：{
轮换：0
}
}

这将产生以下结果

---

我要做的是计算区域宽度和刻度数之间的比率，如果该比率高于某个数字，我会在图表或其包装中添加一个类名，并在那里写下：

.apexcharts-xaxis标签{
显示：无；
&：n子（5n）{显示：还原；}
}

因此，每隔5次显示一次标签，其余标签隐藏。
您还可以设置添加/删除特殊类

这需要为图表提供以下配置：

xaxis:{
标签：{
rotate:0，//无需旋转，因为隐藏标签会提供足够的空间
hideOverlappingLabels:false//必须呈现所有标签
}
}

---

Vsync答案对我不起作用。它需要一些修改：

.apexcharts-xaxis-texts-g text[id^='SvgjsText'] {
    display: none;
}
.apexcharts-xaxis-texts-g text[id^='SvgjsText']:nth-of-type(5n) {
    display: revert;
}

---

谢谢，这个答案非常有效！如果其他人发现了，下面是我如何正确设置日期的格式。我输入了ISO 8601日期，并在

xaxis

设置中添加了一个选项：

标签：{format:'MMMM d'}

。这是一个更多格式的列表。