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

Question

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

\n

我的 ApexChart 看起来像这样：

\n

\n

我想删除许多日期，但仍然让它们出现在工具提示中。我能够在 Frapp\xc3\xa9 图表中执行此操作，它看起来像这样：

\n

\n

这是我的 Apex 图表代码：

\n

\r\n

\r\n

        var options = {\n            chart: {\n                animations: { enabled: false },\n                toolbar: { show: false },\n                zoom: { enabled: false },\n                \n                type: \'line\',\n                height: 400,\n                fontFamily: \'PT Sans\'\n            },\n            stroke: {\n                width: 2\n            },\n            theme: {\n                monochrome: {\n                    enabled: true,\n                    color: \'#800000\',\n                    shadeTo: \'light\',\n                    shadeIntensity: 0.65\n                }\n            },\n            series: [{\n                name: \'New Daily Cases\',\n                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]\n            }],\n            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\'],\n            xaxis: {\n                tooltip: { enabled: false }\n            },\n        }\n\n        var chart = new ApexCharts(document.querySelector("#chart"), options);\n\n        chart.render();

\r\n

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>\n\n<div id="chart"></div>

\r\n

\r\n

\r\n

\n

这是我的 Frapp\xc3\xa9 图表代码（如果有帮助的话）：

\n

\r\n

\r\n

        const data = {\n            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\'],\n            datasets: [{\n                name: \'Cumulative Cases\',\n                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],\n                chartType: \'line\'\n            }]\n        }\n\n        const chart = new frappe.Chart(\'#chart\', {\n            data: data,\n            type: \'line\',\n            height: 250,\n            animate: false,\n            barOptions: {\n                spaceRatio: 0.25\n            },\n            colors: [\'#800000\'],\n            tooltipOptions: {\n                formatTooltipY: d => d.toLocaleString()\n            },\n            axisOptions: {\n                xAxisMode: \'tick\',\n                xIsSeries: true\n            },\n            lineOptions: {\n                hideDots: true,\n                regionFill: true\n            }\n        })

\r\n

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

\r\n

\r\n

\r\n

\n

我尝试使用formatter回调函数仅返回每 10 个值，但是事情变得完全不正确，并且工具提示不起作用。我遇到类似的问题，为我希望排除的值返回空字符串或空格（但仍包含在工具提示中）。

\n

Answer 1

我所做的是计算区域宽度和刻度数之间的比率，如果该比率高于某个数字，我会向图表或其包装器添加一个类名，然后我会写：

.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
  }
}