NextJS中ApexCharts移除X轴标签及添加数据点求助

一、移除X轴上的2100和8000标签 #

你之前用dataLabels没生效，是因为这个配置控制的是数据点上的标签，而非X轴的刻度标签。要隐藏指定的X轴刻度，需要在options.xaxis里配置格式化函数，过滤掉不需要显示的数值：

xaxis: {
  labels: {
    formatter: function(value) {
      // 当数值为2100或8000时，返回空字符串隐藏标签
      if (value === 2100 || value === 8000) {
        return '';
      }
      return value;
    }
  }
}

如果希望完全隐藏所有X轴刻度标签，也可以直接设置xaxis.labels.show: false，按需选择即可。

二、给每条哑铃线添加数据点 #

对于哑铃图（rangeBar），要显示两端的圆点，需要在plotOptions.bar里开启dumbbellDot配置，自定义点的样式：

plotOptions: {
  bar: {
    horizontal: true,
    isDumbbell: true,
    dumbbellColors: [['#808080', '#808080']],
    // 添加哑铃端点的圆点配置
    dumbbellDot: {
      enabled: true,
      size: 6, // 点的大小
      fillColor: '#fff', // 填充色
      strokeColor: '#808080', // 边框色
      strokeWidth: 2 // 边框宽度
    }
  }
}

如果需要给数据点添加数值标签，还可以开启series的dataLabels，并配置位置和显示内容：

series: [
  {
    data: [...],
    dataLabels: {
      enabled: true,
      position: 'top', // 标签位置，可选top/bottom/center等
      formatter: function(val) {
        return val[0] + ' / ' + val[1]; // 自定义显示两端数值
      }
    }
  }
]

修改后的完整代码 #

'use client'
import ReactApexChart from 'react-apexcharts';
import React, { Component } from 'react';
import { Show } from '@chakra-ui/react';


interface GraficoDumbbleState {
  series: {
    data: { x: string; y: [number, number] }[];
    dataLabels?: {
      enabled: boolean;
      position?: string;
      formatter?: (val: [number, number]) => string;
    };
  }[];
  options: {
    chart: {
      height: number;
      type: string;
      zoom: {
        enabled: boolean;
      },
    };
    colors: string[];
    plotOptions: {
      bar: {
        horizontal: boolean;
        isDumbbell: boolean;
        dumbbellColors: string[][];
        dumbbellDot?: {
          enabled: boolean;
          size: number;
          fillColor: string;
          strokeColor: string;
          strokeWidth: number;
        };
      };
    };
    title: {
      text: string;
    };
    legend: {
      show: boolean;
      showForSingleSeries: boolean;
      position: string;
      horizontalAlign: string;
      customLegendItems: string[];
    };
    fill: {
      type: string;
      gradient: {
        gradientToColors: string[];
        inverseColors: boolean;
        stops: number[];
      };
    };
    grid: {
      xaxis: {
        lines: {
          show: boolean;
        },
        
      };
      yaxis: {
        lines: {
          show: boolean;
        };
        yaxis: {
           lines: {
             show: boolean 
            } 
          };
      };
    };
    xaxis?: {
      labels: {
        formatter: (value: number) => string;
      };
    };
  };
}

class GraficoDumbble extends Component<{}, GraficoDumbbleState> {
    constructor(props: any) {
      super(props);

      this.state = {
      
        series: [
          {
            data: [
              {
                x: 'Amarela',
                y: [2100, 8000]
              },
              {
                x: 'Branca',
                y: [2100, 8000]
              },
              {
                x: 'Indígina',
                y: [2100, 8000]
              },
              {
                x: 'Parda',
                y: [2100, 8000]
              },
              {
                x: 'Preta',
                y: [2100, 8000]
              }
            ],
            // 开启数据点标签（可选，按需启用）
            dataLabels: {
              enabled: true,
              position: 'top',
              formatter: (val) => `${val[0]} / ${val[1]}`
            },
          }
        ],
        options: {
          chart: {
            height: 390,
            type: 'rangeBar',
            zoom: {
              enabled: false
            },
          },
          colors: ['#808080', '#808080'],
          plotOptions: {
            bar: {
              horizontal: true,
              isDumbbell: true,
              dumbbellColors: [['#808080', '#808080']],
              // 配置哑铃端点的圆点
              dumbbellDot: {
                enabled: true,
                size: 6,
                fillColor: '#ffffff',
                strokeColor: '#808080',
                strokeWidth: 2
              }
            }
          },
          title: {
            text: '',

          },
          legend: {
            show: false,
            showForSingleSeries: false,
            position: 'top',
            horizontalAlign: 'left',
            customLegendItems: ['Female', 'Male']
          },
          fill: {
            type: 'gradient',
            gradient: {
              gradientToColors: ['#808080'],
              inverseColors: false,
              stops: [0, 100]
            }
          },
          grid: {
            xaxis: {
              lines: {
                show: false
              },
            },
            yaxis: {
              lines: {
                show: false
              },
              yaxis: { lines: { show: false } }
            }
          },
          // 添加X轴标签过滤配置
          xaxis: {
            labels: {
              formatter: (value) => {
                if (value === 2100 || value === 8000) {
                  return '';
                }
                return value.toString();
              }
            }
          }
        },
      
      
      };
    }
    

    render() {
      return (
        <div>
          <div id="chart">
            <ReactApexChart options={this.state.options as any} series={this.state.series} type="rangeBar" height={390} />
          </div>
          <div id="html-dist"></div>
        </div>
      );
    }
  }

  
export default GraficoDumbble;

内容的提问来源于stack exchange，提问作者Mikael Carvalho