charts - ApexCharts:隐藏图表中的每个第 n 个标签

Question

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

我的 ApexChart 看起来像这样:

我想删除许多日期，但仍然让它们出现在工具提示中。我能够在 Frappé Charts 中做到这一点，它看起来像这样:

这是我的 Apex 图表代码:

        var options = {
            chart: {
                animations: { enabled: false },
                toolbar: { show: false },
                zoom: { enabled: false },
                
                type: 'line',
                height: 400,
                fontFamily: 'PT Sans'
            },
            stroke: {
                width: 2
            },
            theme: {
                monochrome: {
                    enabled: true,
                    color: '#800000',
                    shadeTo: 'light',
                    shadeIntensity: 0.65
                }
            },
            series: [{
                name: 'New Daily Cases',
                data: [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]
            }],
            labels: ['February 28','February 29','March 1','March 2','March 3','March 4','March 5','March 6','March 7','March 8','March 9','March 10','March 11','March 12','March 13','March 14','March 15','March 16','March 17','March 18','March 19','March 20','March 21','March 22','March 23','March 24','March 25','March 26','March 27','March 28','March 29','March 30','March 31','April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8','April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16','April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24','April 25','April 26','April 27','April 28','April 29','April 30','May 1','May 2','May 3','May 4','May 5','May 6','May 7','May 8','May 9','May 10','May 11','May 12','May 13','May 14','May 15','May 16','May 17','May 18','May 19','May 20','May 21','May 22','May 23','May 24','May 25','May 26','May 27','May 28','May 29','May 30','May 31','June 1','June 2','June 3','June 4','June 5','June 6','June 7','June 8','June 9','June 10','June 11','June 12','June 13','June 14','June 15','June 16','June 17','June 18','June 19','June 20','June 21','June 22','June 23','June 24','June 25','June 26','June 27','June 28','June 29','June 30','July 1','July 2','July 3','July 4','July 5','July 6','July 7','July 8','July 9','July 10','July 11','July 12','July 13','July 14','July 15','July 16','July 17','July 18','July 19','July 20','July 21','July 22','July 23','July 24'],
            xaxis: {
                tooltip: { enabled: false }
            },
        }

        var chart = new ApexCharts(document.querySelector("#chart"), options);

        chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

如果有帮助，这是我的 Frappé Chart 代码:

        const data = {
            labels: ['February 28','February 29','March 1','March 2','March 3','March 4','March 5','March 6','March 7','March 8','March 9','March 10','March 11','March 12','March 13','March 14','March 15','March 16','March 17','March 18','March 19','March 20','March 21','March 22','March 23','March 24','March 25','March 26','March 27','March 28','March 29','March 30','March 31','April 1','April 2','April 3','April 4','April 5','April 6','April 7','April 8','April 9','April 10','April 11','April 12','April 13','April 14','April 15','April 16','April 17','April 18','April 19','April 20','April 21','April 22','April 23','April 24','April 25','April 26','April 27','April 28','April 29','April 30','May 1','May 2','May 3','May 4','May 5','May 6','May 7','May 8','May 9','May 10','May 11','May 12','May 13','May 14','May 15','May 16','May 17','May 18','May 19','May 20','May 21','May 22','May 23','May 24','May 25','May 26','May 27','May 28','May 29','May 30','May 31','June 1','June 2','June 3','June 4','June 5','June 6','June 7','June 8','June 9','June 10','June 11','June 12','June 13','June 14','June 15','June 16','June 17','June 18','June 19','June 20','June 21','June 22','June 23','June 24','June 25','June 26','June 27','June 28','June 29','June 30','July 1','July 2','July 3','July 4','July 5','July 6','July 7','July 8','July 9','July 10','July 11','July 12','July 13','July 14','July 15','July 16','July 17','July 18','July 19','July 20','July 21','July 22','July 23','July 24'],
            datasets: [{
                name: 'Cumulative Cases',
                values: [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],
                chartType: 'line'
            }]
        }

        const chart = new frappe.Chart('#chart', {
            data: data,
            type: 'line',
            height: 250,
            animate: false,
            barOptions: {
                spaceRatio: 0.25
            },
            colors: ['#800000'],
            tooltipOptions: {
                formatTooltipY: d => d.toLocaleString()
            },
            axisOptions: {
                xAxisMode: 'tick',
                xIsSeries: true
            },
            lineOptions: {
                hideDots: true,
                regionFill: true
            }
        })

<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.5.2/dist/frappe-charts.min.iife.min.js"></script>

<div id="chart"></div>

我已经尝试使用 formatter 回调函数仅返回每 10 个值，但一切都错位了，工具提示也不起作用。我遇到类似的问题，为我希望排除的值返回一个空字符串或一个空格(但仍包含在工具提示中)。

Answer 1

我所做的是计算区域宽度与刻度数之间的比率，如果该比率高于某个数字，我将 classname 添加到图表或它的包装器中，然后我写:

.apexcharts-xaxis-label{
  display: none;
  &:nth-child(5n){ display:revert; }
}

所以每第 5 个 标签显示，其余标签隐藏。
您还可以设置 resizeObserver添加/删除特殊类。

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

xaxis: {
  labels: {
    rotate: 0, // no need to rotate since hiding labels gives plenty of room
    hideOverlappingLabels: false  // all labels must be rendered
  }
}