如何在 apexCharts js 上隐藏一些轴标签元素？

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

这是我发现的：格式化标签的唯一方法是在 xaxis object:

上使用以下函数

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

现在的问题是，当您将鼠标悬停在 table 中的条目上时，我无法找到不会在您看到的小标签中添加一些值的解决方案。我能做的最好的是：

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

拆分returns 一个字符串数组。例如，对于字符串 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 标签内测试的内容（我在 header 中将 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>

如何在 apexCharts js 上隐藏一些轴标签元素？

How to hide some xaxis labels elements on apexChartjs?

javascript

apexcharts