在 ChartJS 3.8.x 中设置 borderSkipped: false 后，漏斗图的左边框不绘制

Question

我有这个漏斗图：

this.chartLeads2 = new FunnelChart(document.getElementById("graphLead2").getContext('2d'), 
        {
          data: {
            labels: ["TOTAL Q LEADS", "WAITING", "ACHIEVED"],
            datasets: [
              {
                borderSkipped: false // this doesn't work
                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 // this doesn't work
              },
              bar:{
                borderSkipped: false // this doesn't work
              }
            }
          },
          plugins: [ChartDataLabels],
        }
      )

一切正常，除了

borderSkipped: false

，它没有使左边框出现。我尝试设置

borderSkipped: 'top'

但它也没有改变任何东西。我做错了什么？

Answer 1

正如 @Skandog 所讨论的，这是一个错误；我们可以在源码中看到 在TrapezoidElement#draw； 调用

this.computeWayPoints();

返回四个点，但只有三条线连接这些点， 在接下来的

for

；可以通过在第 265 行添加

ctx.closePath()

来解决。

在开发人员解决该错误之前，您也可以通过在多边形末端重复起点来修补它 由

TrapezoidElement#computeWayPoints

返回:

const TrapezoidClass = Chart.registry.elements.get('trapezoid');
if(TrapezoidClass){
    const original_computeWayPoints = TrapezoidClass.prototype.computeWayPoints;
    if(original_computeWayPoints){
        TrapezoidClass.prototype.computeWayPoints = function(useFinalPosition){
            const wp = original_computeWayPoints.call(this, useFinalPosition);
            if(useFinalPosition === undefined && wp.length === 4){
                // this is the call from draw, the others have a default useFinalPosition=false
                wp.push(wp[0]); // close the polygon
            }
            return wp;
        }
    }
}
const data = {
    labels: ["TOTAL Q LEADS", "WAITING", "ACHIEVED"],
    datasets: [
        {
            data: [1, 0.75, 0.5],
            borderWidth: 2,
            borderColor: "black"
        }
    ]
};

const config = {
    type: "funnel",
    data,
    options: {
        indexAxis: "y"
    }
};


new Chart(document.querySelector('#myChart'), config);

<div style="min-height: 60vh">
    <canvas id="myChart">
    </canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
<script src="https://unpkg.com/chartjs-chart-funnel"></script>

旁注：你没有提到你正在使用的插件，我对

borderSkipped

属性的使用有点困惑 - 它

chartjs-chart-funnel

根本不使用它，但它被广泛用于

Chart.Funnel.js

插件，这似乎无关。