React中ApexChart X轴标签不显示小数及轴扩展问题问询

问题说明 #

• RangeBar图表的X轴标签无法显示小数，仅重复显示整数（数值被取整），但鼠标悬停时自定义tooltip能展示正确数值
• 需要手动将X轴扩展到指定值

原代码示例 #

this.state = {
    options: {
        chart: {
            height: '600',
            type: 'rangeBar',
            toolbar: {
                show: true,
                autoSelected: 'selection'
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,

            }
        },
        legend: {
            position: 'right'
        },
        xaxis: {
            type: 'numeric',
            title: {
                text: 'ms'
            },
            labels: {
                show: true
            },
            decimalInFloat: 3,
        },
        tooltip: {
            custom: ({ dataPointIndex, w }) => {
                let s = w.config.series[0].data[dataPointIndex];
                return `<div class="apexcharts-tooltip-rangebar"><div>
            <span class="category">${s.x}: </span>
            <span class="value start-value">${s.y[0]}</span>
            <span class="separator">-</span>
            <span class="value end-value">${s.y[1]}</span></div></div>`;
            }
        },
    },
    series: [
        {
            data: []
        }
    ],
}

问题1：X轴标签显示小数的解决方法 #

原代码中decimalInFloat并非ApexChart的有效配置项，需调整X轴配置强制显示小数：

1. 在xaxis中添加decimals属性指定全局小数位数
2. 给xaxis.labels添加formatter函数，手动格式化标签为指定小数位数
3. 可选：设置tickAmount控制刻度数量，避免重复整数标签

修改后的X轴配置：

xaxis: {
    type: 'numeric',
    title: {
        text: 'ms'
    },
    labels: {
        show: true,
        // 强制格式化标签为3位小数
        formatter: (value) => value.toFixed(3)
    },
    // 指定数值保留的小数位数
    decimals: 3,
    // 可选：根据数据点数量生成刻度，或直接指定数量如5
    tickAmount: 'dataPoints'
},

问题2：手动扩展X轴到指定值的解决方法 #

通过xaxis的min和max属性直接设置X轴的起止范围，即可手动扩展到目标值：

xaxis: {
    type: 'numeric',
    title: {
        text: 'ms'
    },
    // 自定义X轴最小值
    min: 0,
    // 自定义X轴最大值，替换为你需要的指定值
    max: 15.8,
    labels: {
        show: true,
        formatter: (value) => value.toFixed(3)
    },
    decimals: 3
},

完整修正后的配置示例 #

this.state = {
    options: {
        chart: {
            height: '600',
            type: 'rangeBar',
            toolbar: {
                show: true,
                autoSelected: 'selection'
            },
        },
        plotOptions: {
            bar: {
                horizontal: true
            }
        },
        legend: {
            position: 'right'
        },
        xaxis: {
            type: 'numeric',
            title: {
                text: 'ms'
            },
            labels: {
                show: true,
                formatter: (value) => value.toFixed(3)
            },
            decimals: 3,
            tickAmount: 'dataPoints',
            // 自定义X轴范围
            min: 0,
            max: 15.8
        },
        tooltip: {
            custom: ({ dataPointIndex, w }) => {
                let s = w.config.series[0].data[dataPointIndex];
                return `<div class="apexcharts-tooltip-rangebar"><div>
            <span class="category">${s.x}: </span>
            <span class="value start-value">${s.y[0]}</span>
            <span class="separator">-</span>
            <span class="value end-value">${s.y[1]}</span></div></div>`;
            }
        },
    },
    series: [
        {
            data: []
        }
    ],
}

内容的提问来源于stack exchange，提问作者Amir Taghizadegan