图表。 js 形状着色

Question

我有一个使用 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;
        };

Answer 1

确保数据点的正确顺序 例如。

var data = [
{ x: minFluidOutletTemp, y: minAmbientTemp }, // Point 1
{ x: minFluidOutletTemp, y: maxAmbientTemp }, // Point 2
{ x: maxFluidOutletTemp, y: maxAmbientTemp }, // Point 3
{ x: maxFluidOutletTemp, y: minAmbientTemp } // Point 4

];

配置填充选项

fill: true;

指定背景颜色

backgroundColor: 'rgba(0, 128, 0, 0.3)',

确保 y 轴刻度配置正确以适应数据点的范围。这似乎在您的代码中正确设置为 min:

yAxisMin

和 max:

yAxisMax

。

确保您使用的 Chart.js 版本支持您正在使用的功能。 Chart.js 2.x 及更高版本中很好地支持

fill

选项和数据集配置。