Chart.js四边形填充异常求助：未填充区域如何修复？

问题描述 #

使用Chart.js创建了一个图表，通过四个坐标点连接形成四边形，并将其内部填充为绿色。但出现填充异常：Y轴数值较低的点对应的区域被填充至高处，右侧低点位对应的区域未被填充。

异常效果如下：

问题代码 #

var ctx = document.getElementById('workingLimitGraph').getContext('2d');
var minFluidOutletTemp = @Model.SerieLimits.Cooling_MinFluidOutletTemp;
var maxFluidOutletTemp = @Model.SerieLimits.Cooling_MaxFluidOutletTemp;
var minAmbientTemp = @Model.SerieLimits.Cooling_MinAmbientTemp;
var maxAmbientTemp = @Model.SerieLimits.Cooling_MaxAmbientTemp;
//added/subtracted values to expand chart axis values
var xAxisMin = minFluidOutletTemp - 5;
var xAxisMax = maxFluidOutletTemp + 5;
var yAxisMin = minAmbientTemp - 10;
var yAxisMax = maxAmbientTemp + 10;

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: '',
            data: [
                { x: minFluidOutletTemp, y: minAmbientTemp },
                { x: minFluidOutletTemp, y: maxAmbientTemp },
                { x: maxFluidOutletTemp, y: maxAmbientTemp },
                { x: maxFluidOutletTemp, y: minAmbientTemp }
            ],
            fill: true,
            backgroundColor: 'rgba(0, 128, 0, 0.3)',
            borderColor: 'rgba(0, 128, 0, 0.3)',
            borderWidth: 1,
            pointRadius: 5,
            pointBackgroundColor: 'rgba(0, 128, 0, 0.3)',
            pointBorderColor: 'rgba(0, 128, 0, 0.3)',
            showLine: true
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Water Outlet Temperature (°C)'
                },
                ticks: {
                    stepSize: 1,
                    padding: 20,
                },
                grid: {
                    display: false
                },
                min: xAxisMin,
                max: xAxisMax,
                stepSize: 1,
            },
            y: {
                title: {
                    display: true,
                    text: 'Ambient Air Temperature (°C)'
                },
                ticks: {
                    stepSize: 10,
                    padding: 20,
                },
                min: yAxisMin,
                max: yAxisMax,
                stepSize: 10,
            }
        }
    }
});

// X ekseninin etiketlerini oluşturma
var xAxisLabels = [];
for (var i = minFluidOutletTemp - 3; i <= maxFluidOutletTemp + 3; i += 1) {
    xAxisLabels.push(i);
}

myChart.data.labels = xAxisLabels;
// Y ekseninin etiketlerini oluşturma
var yAxisLabels = [];
for (var i = yAxisMin; i <= yAxisMax; i += 10) {
    yAxisLabels.push(i);
}
myChart.options.scales.y.ticks.callback = function (value, index, values) {
    return value;
};

问题原因 #

1. 错误设置类别标签：使用{x,y}格式的数值型坐标数据时，无需设置data.labels，该操作会强制Chart.js将X轴解析为类别轴，破坏笛卡尔坐标的正常映射，引发填充逻辑混乱。
2. 路径未明确闭合：当前数据点仅形成开放的折线，Chart.js默认填充逻辑是向坐标轴基线填充，而非闭合多边形内部。

修复方案 #

1. 移除干扰性的类别标签设置 #

删除代码中设置myChart.data.labels = xAxisLabels;的相关代码，让Chart.js正确识别X轴为数值轴。

2. 闭合折线路径 #

在data数组末尾添加第一个点，让折线形成闭合的四边形路径，确保填充逻辑能识别出需要填充的内部区域。

修改后的完整代码 #

var ctx = document.getElementById('workingLimitGraph').getContext('2d');
var minFluidOutletTemp = @Model.SerieLimits.Cooling_MinFluidOutletTemp;
var maxFluidOutletTemp = @Model.SerieLimits.Cooling_MaxFluidOutletTemp;
var minAmbientTemp = @Model.SerieLimits.Cooling_MinAmbientTemp;
var maxAmbientTemp = @Model.SerieLimits.Cooling_MaxAmbientTemp;
//added/subtracted values to expand chart axis values
var xAxisMin = minFluidOutletTemp - 5;
var xAxisMax = maxFluidOutletTemp + 5;
var yAxisMin = minAmbientTemp - 10;
var yAxisMax = maxAmbientTemp + 10;

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: '',
            data: [
                { x: minFluidOutletTemp, y: minAmbientTemp },
                { x: minFluidOutletTemp, y: maxAmbientTemp },
                { x: maxFluidOutletTemp, y: maxAmbientTemp },
                { x: maxFluidOutletTemp, y: minAmbientTemp },
                { x: minFluidOutletTemp, y: minAmbientTemp } // 添加第一个点闭合路径
            ],
            fill: true,
            backgroundColor: 'rgba(0, 128, 0, 0.3)',
            borderColor: 'rgba(0, 128, 0, 0.3)',
            borderWidth: 1,
            pointRadius: 5,
            pointBackgroundColor: 'rgba(0, 128, 0, 0.3)',
            pointBorderColor: 'rgba(0, 128, 0, 0.3)',
            showLine: true
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Water Outlet Temperature (°C)'
                },
                ticks: {
                    stepSize: 1,
                    padding: 20,
                },
                grid: {
                    display: false
                },
                min: xAxisMin,
                max: xAxisMax,
                stepSize: 1,
            },
            y: {
                title: {
                    display: true,
                    text: 'Ambient Air Temperature (°C)'
                },
                ticks: {
                    stepSize: 10,
                    padding: 20,
                },
                min: yAxisMin,
                max: yAxisMax,
                stepSize: 10,
            }
        }
    }
});

// Y ekseninin etiketlerini oluşturma
var yAxisLabels = [];
for (var i = yAxisMin; i <= yAxisMax; i += 10) {
    yAxisLabels.push(i);
}
myChart.options.scales.y.ticks.callback = function (value, index, values) {
    return value;
};

效果说明 #

修改后，Chart.js会正确解析数值坐标轴，闭合的折线路径配合fill: true会准确填充四边形内部区域，解决原有的填充异常问题。

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