如何隐藏 apexChartjs 上的一些 xaxis 标签元素？

Question

我正在使用 apexChart 创建一个图表项目。我的目标是隐藏具有奇数 xaxis 元素索引的 xaxis 标签。经过几个小时的网络研究，我仍然无法实现它。有人可以帮我吗？[![在此处输入图像描述][1]][1] [1]：https://i.stack.imgur.com/ZJlqW.png

这是我截取的代码：

<div id="chart"></div>
<script src="apexcharts.js"></script>
<script>
var typeStr = 'column';
var options = {
        series: [
      {
        name: 'acts number',
         type: typeStr,
    data: [0, 0, 0, 8, 10, 45.6, 0, 0, 0, 0, 0, 0]
  },
  {
    name: 'cost',
    type: typeStr,
    data: [0.0, 0.0, 0.0, 25.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
  }],
  chart: {
    height: 350,
    type: 'line',
    stacked: false,
    toolbar: {
        show: false
      },
    zoom: {
        enabled: false
      }
  },
  stroke: {
    width: [2, 2, 2],
    curve: 'straight'
  },
   legend: {
      show: false
  },
  colors: ['#10baee', '#297694'],
  dataLabels: {
    enabled: false,
    enabledOnSeries: [1]
  },
  xaxis: {
      categories: ['07 fevr.','08 fevr.','09 fevr.','10 fevr.','11 fevr.','12 fevr.','13 fevr.', '14 fevr.','15 fevr.','16 fevr.','17 fevr.','18 fevr.'],
      tickPlacement: 'on'
  },
  yaxis: [
      {
          seriesName: 'acts',
          axisTicks: {
            show: true,
          },
          axisBorder: {
            show: true,
            color: '#10baee'
          },
          labels: {
            style: {
              color: '#10baee',
            },
            formatter: (value) => { return value }
          },
          title: {
            text: "Views",
            style: {
              color: '#10baee',
            }
          },
        },
        {
          seriesName: 'cost',
          opposite: true,
          axisTicks: {
            show: true,
          },
          axisBorder: {
            show: true,
            color: '#297694'
          },
          labels: {
            style: {
              color: '#297694',
            },
            formatter: function (value) {
                return value.toFixed(2) + " \u20ac";
            },
           },
          title: {
            text: "Acts price",
            style: {
              color: '#297694',
            }
          }
        },
      ]
  };
var chartH = new ApexCharts(document.querySelector("#chart"), options);
chartH.render();

Answer 1

在这里我找到了解决这个问题的新代码，它可以在 X 轴或 Y 轴上工作

yaxis: {
  labels: {
    show: false,
  }
},

Answer 2

这是我发现的：格式化标签的唯一方法是在对象上使用以下函数xaxis：

xaxis: {
    labels: {
        formatter: function(value) {
           return value;    
    }
  }
}

现在的问题是，我找不到一种解决方案，该解决方案不会为您将鼠标悬停在表中的条目上时看到的小标签赋予一些价值。我能做的最好的就是：

格式化程序函数只是获取您放入categories数组中的所有内容。因此，我们获取每个值，如果它不是未定义的，我们将其拆分（因为您的日期看起来像：day month..

• Split 返回一个字符串数组。例如，对于字符串07 fevr.，在 split() 之后，我们得到splittedCategories以下内容：['07', 'fevr.']。您可以使用以下命令检查这一点console.log(splittedCategories)

之后，我们获取当天的数字（位于结果字符串数组的第一个条目上）并查看它是偶数还是奇数。如果它是偶数，我们只需添加其值的标签（例如07 fevr.），否则，我们什么也不添加。

xaxis: {
          categories: ['07 fevr.', '08 fevr.', '09 fevr.', '10 fevr.', '11 fevr.', '12 fevr.', '13 fevr.', '14 fevr.', '15 fevr.', '16 fevr.', '17 fevr.', '18 fevr.'],
          tickPlacement: 'on',
          labels: {
              formatter: function (value) {
                  if (value !== undefined)
                      splittedCategories = value.split(" ")
                  dayNumber = splittedCategories[0]
                  return dayNumber % 2 == 1 ? value : "";
              }
          }
      },

请告诉我这是否足以满足您的用例。这是关于格式化的官方文档：Docs

编辑 我已经使 if 语句更加清晰了。另外，这是我在body标签内测试的内容（我在标头中导入了 apexcharts 作为<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>）：

<div id="chart"></div>
<script>
    var typeStr = 'column';
    var options = {
        series: [
            {
                name: 'acts number',
                type: typeStr,
                data: [0, 0, 0, 8, 10, 45.6, 0, 0, 0, 0, 0, 0]
            },
            {
                name: 'cost',
                type: typeStr,
                data: [0.0, 0.0, 0.0, 25.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]
            }],
        chart: {
            height: 350,
            type: 'line',
            stacked: false,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            }
        },
        stroke: {
            width: [2, 2, 2],
            curve: 'straight'
        },
        legend: {
            show: false
        },
        colors: ['#10baee', '#297694'],
        dataLabels: {
            enabled: false,
            enabledOnSeries: [1]
        },
        xaxis: {
            categories: ['07 fevr.', '08 fevr.', '09 fevr.', '10 fevr.', '11 fevr.', '12 fevr.', '13 fevr.', '14 fevr.', '15 fevr.', '16 fevr.', '17 fevr.', '18 fevr.'],
            tickPlacement: 'on',
            labels: {
                formatter: function (value) {
                    if (value !== undefined) {
                        splittedCategories = value.split(" ")
                        dayNumber = splittedCategories[0]
                        return dayNumber % 2 == 1 ? value : "";
                    }
                    return ""
                }
            }
        },
        yaxis: [
            {
                seriesName: 'acts',
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: true,
                    color: '#10baee'
                },
                labels: {
                    style: {
                        color: '#10baee',
                    },
                    formatter: (value) => { return value }
                },
                title: {
                    text: "Views",
                    style: {
                        color: '#10baee',
                    }
                },
            },
            {
                seriesName: 'cost',
                opposite: true,
                axisTicks: {
                    show: true,
                },
                axisBorder: {
                    show: true,
                    color: '#297694'
                },
                labels: {
                    style: {
                        color: '#297694',
                    },
                    formatter: function (value) {
                        return value.toFixed(2) + " \u20ac";
                    },
                },
                title: {
                    text: "Acts price",
                    style: {
                        color: '#297694',
                    }
                }
            },
        ]
    };
    var chartH = new ApexCharts(document.querySelector("#chart"), options);
    chartH.render();
</script>