返回

ApexCharts:隐藏图例标签与图标的实用方法

vue.js

隐藏 ApexCharts 图例中的标签与图标

在使用 ApexCharts 进行数据可视化时,经常需要精细地控制图例的显示,一个常见需求是针对特定的数据系列隐藏图例中的标签和圆点图标。默认情况下,legend.formatter 可以用于隐藏标签文本,但无法直接控制图标的显示。本篇文章将探讨如何解决这一问题,并提供几种实用的方法。

问题分析

ApexCharts 默认行为是将所有数据系列的图例都显示出来,通过配置legend.formatter 只能处理标签文本。尝试在 series 中配置隐藏参数并不会生效,原因是 chartOptions 才是图表配置的核心,直接修改 series 中的配置优先级较低。目前无法找到一种配置可以简单直接的控制特定数据系列的图标, 需要采用其他手段解决。我们需要一种方法,针对特定的系列同时隐藏标签和图标。

解决方案

这里提供了两种有效的方法来解决这个挑战,让我们可以隐藏图例的标签和图标:

方案一:使用 CSS 定制化隐藏

利用 ApexCharts 为每个图例项提供的 CSS 类名,可以通过 CSS 规则来精准地隐藏指定系列的标签和图标。这种方法无需改动 JavaScript 代码逻辑,操作简单且灵活。

  1. 分析 CSS 类名结构:
    首先,通过浏览器开发者工具观察图表元素。可以看到,ApexCharts 生成的图例项使用了 apexcharts-legend-series 作为容器的 class 前缀,接着是具体的索引,以及更深层次的图标 apexcharts-legend-marker,和文本apexcharts-legend-text
    例如, 第一个系列的图标会类似 apexcharts-legend-series-0 apexcharts-legend-marker , 第一个系列的标签文本为apexcharts-legend-series-0 apexcharts-legend-text。第二个系列的索引为 1,以此类推。

  2. 使用CSS 隐藏目标图标和标签:
    有了索引和标签文本类, 我们就可以通过索引精准控制图标和标签的显隐。我们可以定义 hiddenSeriesIndex 用于记录要隐藏的系列的索引,基于此动态设置 CSS 规则。注意要让 CSS 规则有足够高的优先级。
    注意:使用开发者工具确保能够精确找到需要隐藏图例的正确索引。

  3. 示例代码:

    <div id="chart"></div>
    <style>
        .apexcharts-legend.hide-legend .apexcharts-legend-series-0 { /* 使用真实 index */
             display: none;
        }
        .apexcharts-legend.hide-legend .apexcharts-legend-series-1 { /* 使用真实 index */
             display: none;
        }
    
    </style>
    
    <script>
       let options = {
          chart: {
              type: 'rangeArea',
               height: 400
          },
           legend: {
                show: true,
                //  以下内容可以保留也可以不保留
              formatter: function(seriesName) {
                    // List of series names to hide
                 const hiddenSeries = ['CI_70', 'CI_90'];
                  for (let hidden of hiddenSeries) {
                      if (seriesName.includes(hidden)) {
                          return '';
                       }
                 }
                return seriesName;
                },
               onItemClick: {
                     toggleDataSeries: true
                 },
            },
    
        series: [
         {
         name: 'Sample A - CI_70',
         data: [
             { x: '10-06-2023', y: [61, 99] }, { x: '11-06-2023', y: [42, 84] }, { x: '12-06-2023', y: [45, 63] } ],
         type: 'rangeArea',
             },
             {
             name: 'Sample B - CI_90',
               data: [
                     { x: '10-06-2023', y: [22, 53] }, { x: '11-06-2023', y: [30, 90] }, { x: '12-06-2023', y: [44, 71] } ],
             type: 'rangeArea',
             },
               {
         name: 'Sample C',
         data: [
         {x:'10-06-2023', y:33}, {x:'11-06-2023', y:63}, {x:'12-06-2023',y:99}
         ],
              }
           ]
       }
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    
        let legendContainer = document.querySelector('.apexcharts-legend');
        legendContainer.classList.add('hide-legend')
    </script>
    

这里需要注意的是 hiddenSeriesIndex 要结合数据本身的结构进行动态计算。这个例子的索引假设需要隐藏的是 Sample A - CI_70 (索引为 0) 以及 Sample B - CI_90(索引为 1)。所以使用 .apexcharts-legend-series-0.apexcharts-legend-series-1 隐藏标签和图标。 同时也添加了一个顶层的class, 以控制 CSS 规则的影响范围。

方案二:自定义图例渲染函数

ApexCharts 提供了 legend.customLegendItems 配置,该选项允许自定义图例的渲染方式。通过自定义渲染函数,可以根据数据系列的属性选择是否渲染特定的图例项。

  1. 设置 customLegendItems:
    在图表的 legend 配置中,设置 customLegendItems 选项为一个返回图例项数组的函数。该函数可以基于 series 中定义的信息灵活生成图例。

  2. 根据系列信息隐藏指定项:
    在该函数中,检查每个系列的名称或任何唯一属性,判断其是否应该被显示在图例中,跳过不想显示的系列的渲染。

  3. 代码示例:

      let options = {
        chart: {
            type: 'rangeArea',
            height: 400
           },
        legend: {
             show: true,
              customLegendItems: function(chart) {
    
               const hiddenSeries = ['CI_70', 'CI_90']; // 配置需要隐藏的字符串
               let items = [];
    
                 chart.series.forEach((s, index) => {
                     if(!hiddenSeries.some(item=>s.name.includes(item))){  // 使用 includes 检查系列名
                           items.push({text: s.name, fill: s.color,  strokeWidth: 0, strokeDashArray: undefined});
                     }
                   })
                    return items
             },
              onItemClick: {
                toggleDataSeries: true
              },
    
           },
    
          series: [
               {
                 name: 'Sample A - CI_70',
                data: [
                     { x: '10-06-2023', y: [61, 99] }, { x: '11-06-2023', y: [42, 84] }, { x: '12-06-2023', y: [45, 63] } ],
                type: 'rangeArea',
                },
                  {
                      name: 'Sample B - CI_90',
                    data: [
                           { x: '10-06-2023', y: [22, 53] }, { x: '11-06-2023', y: [30, 90] }, { x: '12-06-2023', y: [44, 71] } ],
                 type: 'rangeArea',
                   },
                     {
                   name: 'Sample C',
                    data: [
                      {x:'10-06-2023', y:33}, {x:'11-06-2023', y:63}, {x:'12-06-2023',y:99}
                    ],
                  }
             ]
     }
      var chart = new ApexCharts(document.querySelector("#chart"), options);
     chart.render();
    

这个代码示例使用数组的 some 函数检查 series.name 中是否包含配置的要隐藏的字符串,只有当不包含的时候,才执行 push 操作加入待渲染的图例项目,巧妙达到了控制显隐的目的。 strokeWidthstrokeDashArray 为可以选配的样式选项,通常用于定制线图。这里不需要显示描边效果所以设置为0和 undefined。

总结

通过 CSS 或自定义图例渲染函数,可以有效地解决 ApexCharts 图例中隐藏特定标签与图标的问题。使用 CSS 方法,配置更简单,适合小范围调整样式;而使用自定义函数提供了更精细化的控制能力,可以依据复杂逻辑生成图例。实际选择哪种方法取决于具体的应用场景和开发需求,以上两种方案提供了灵活选择。