ChartJS 3.8.x设置borderSkipped:false后漏斗图左侧边框不显示

可能的问题点及修复步骤 #

1. 修复代码语法错误 #

你的dataset配置中，borderSkipped: false这一行末尾缺少逗号，会导致JavaScript语法错误，这可能是配置不生效的原因之一：

// 错误写法
borderSkipped: false // this doesn't work
data: [this.leads.won + this.leads.waiting, this.leads.waiting, this.leads.won],

// 正确写法
borderSkipped: false, // 添加逗号
data: [this.leads.won + this.leads.waiting, this.leads.waiting, this.leads.won],

2. 确保设置了borderWidth #

默认情况下，Chart.js的元素边框宽度为0，即使borderSkipped配置正确，也看不到边框。需要在dataset或elements.trapezoid中添加borderWidth配置：

datasets: [
  {
    borderSkipped: false,
    borderWidth: 1, // 设置边框宽度
    // 其他配置...
  }
]

3. 针对垂直漏斗（indexAxis: 'y'）的边框调整 #

对于垂直方向的漏斗图，左侧对应的是start边。如果borderSkipped: false仍不生效，可以尝试明确指定要跳过的边（仅排除左侧以外的边）：

elements: {
  trapezoid: {
    borderSkipped: ['end', 'top', 'bottom'], // 保留左侧边框
    borderWidth: 1
  }
}

4. 确认插件版本兼容性 #

如果使用的是chartjs-chart-funnel插件，部分旧版本对borderSkipped的支持不完善，建议升级到最新版本，确保配置能正常生效。

完整修复后的示例代码片段 #

this.chartLeads2 = new FunnelChart(document.getElementById("graphLead2").getContext('2d'), 
{
  data: {
    labels: ["TOTAL Q LEADS", "WAITING", "ACHIEVED"],
    datasets: [
      {
        borderSkipped: false,
        borderWidth: 1, // 添加边框宽度
        data: [this.leads.won + this.leads.waiting, this.leads.waiting, this.leads.won],
        borderColor: [this.borderColors[0],this.borderColors[1],this.borderColors[2]],
        backgroundColor: [this.bgColors[0],this.bgColors[1],this.bgColors[2]],
        datalabels: {
          textAlign: 'center',
          color: (context) => {
            return this.borderColors[context.dataIndex];
          },
          font: {
            size: 12,
          },
          formatter: (value, context) => {
            const label = context.chart.data.labels[context.dataIndex];
            return `${label}\n${(value).toLocaleString()}`;
          }
        },
      }
    ]
  },
  options: {
    indexAxis: 'y',
    elements:{
      trapezoid:{
        borderSkipped: false,
        borderWidth: 1
      }
    }
  },
  plugins: [ChartDataLabels],
}
)

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