ApexChart双列图表未显示全部目标线问题排查

问题描述 #

尝试创建展示月度目标的ApexChart图表时，最后一个月的蓝色目标线未显示，但该月份的目标数据确实存在。

数据格式（红、蓝色系列） #

[{
    "x":"label",
    "y":numericValue,
    "goals":[{
        "name":"goalLabel",
        "value":goalValue,
        "strokeHeight":5,
        "strokeColor":"rgb(255, 25, 86)"
    }]
}]

图表创建代码 #

<Chart
    height={350}
    options={{
      chart: {
        toolbar: { show: false },
        zoom: { enabled: false }
      },
      legend: { show: true },
      stroke: { show: true, width: 2 },
      xaxis: {
        type: 'category'
      },
      yaxis: [
        {
          axisTicks: {
            show: true
          },
          labels: {
            formatter: (value: number) => {
              if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
              if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
              return value.toFixed(0);
            }
          },
          seriesName: [strings('dashboard.cash'), strings('dashboard.ca')],
        },
        {
          opposite: true,
          labels: {
            formatter: (value: number) => {
              if (value >= 1000000) return (value / 1000000).toFixed(0) + 'M';
              if (value >= 1000) return (value / 1000).toFixed(0) + 'K';
              return value.toFixed(0);
            },
          },
          seriesName: strings('dashboard.arpa'),
        }
      ],
      tooltip: {
        y: {
          formatter: (value: number) =>
            new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(value),
        },
      },
    }}
    series={[
      { name: strings('dashboard.cash'), data: cash, type: 'bar', color: 'rgba(215, 66, 106,1)' },
      { name: strings('dashboard.ca'), data: sales, type: 'bar', color: 'rgba(115, 112, 255,1)' },
      { name: strings('dashboard.arpa'), data: arpa, type: 'line', color: 'rgba(238, 204, 0,1)' }
    ]}
    type='line'
    width="100%"
/>

Chart组件定义 #

import dynamic from 'next/dynamic';
import { styled } from '@mui/material/styles';

const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false, loading: () => null });

export const Chart = styled(ApexChart)``;

图表说明：第一张图显示月度数据图表，最后一个月（March '25）的蓝色目标线缺失；第二张图显示该月份的目标数据确实存在。

成因分析 #

1. X轴标签不匹配：ApexChart分类x轴要求数据点的x值与x轴渲染标签完全一致（含大小写、空格、格式），若最后一个数据点的x值与x轴标签存在差异，目标线会因无法匹配位置而不显示。
2. 多Y轴关联错误：蓝色系列绑定第一个Y轴，若目标值超出该Y轴显示范围，或未明确指定目标线所属Y轴，会导致目标线被隐藏。
3. 数据格式异常：最后一个数据点的goals数组可能存在字段缺失、类型错误等问题，导致ApexChart无法解析渲染目标线。

修复方案 #

1. 校验X轴标签一致性：
   检查最后一个月数据点的x值与x轴显示标签（如"March '25"）是否完全一致，修正格式、大小写或空格差异。
2. 明确目标线的Y轴关联：
   在goals配置中添加axisIndex字段，指定目标线所属Y轴（蓝色系列对应第一个Y轴，即axisIndex: 0）：

   "goals":[{
       "name":"goalLabel",
       "value":goalValue,
       "strokeHeight":5,
       "strokeColor":"rgb(255, 25, 86)",
       "axisIndex": 0
   }]
   

3. 检查数据格式完整性：
   确认最后一个数据点的goals数组必填字段（value、strokeColor等）存在且类型正确，无语法错误。
4. 更新ApexChart版本：
   若使用旧版本react-apexcharts，可能存在目标线渲染bug，尝试更新到最新稳定版本。

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