更新 chart.js 后图表区域出现奇怪的 "padding" (2.8.0 -> 3.4.1)

Question

抱歉我的英语不好。

将 chart.js 从 2.8.0 更新到 3.4.1 后，我在图表区域看到了奇怪的“填充”（左右）（请查看屏幕截图）。

.

在官网的Samples中，可以看到没有padding的折线图。但是我在条形图的示例中看到了（可能是条形图的某些设置可以生效？）。

下面是图表配置、图表实例化、插件和样式模板的代码：

// chart options
chartOptions = {
        type: "line",
        data: {
            datasets: [],
        },
        options: {
            elements: {
                point: { radius: 0 },
                line: { tension: 0, borderWidth: 1 }
            },
            animation: false,
            resizeDelay: 100,
            responsive: true,
            maintainAspectRatio: true,
            legend: { display: false },
            tooltips: {
                mode: 'nearest',
                intersect: false,
                callbacks: {label: (item, data) => this.onLabel(item, data)}
            },
            hover: {
                mode: 'nearest',
                intersect: false,
            },
            scales: {
                x: {
                    offset: true,
                    stacked: true,
                    type: 'time',
                    time: {
                        tooltipFormat: 'DD MMMM YYYY HH:mm:ss',
                        displayFormats: {
                            millisecond: 'HH:mm:ss.SSS',
                            second: 'HH:mm:ss',
                            minute: 'HH:mm',
                            hour: 'HH:mm',
                            day: 'DD MMM',
                        },
                    },
                    ticks: {
                        major: {
                            enabled: true,
                            fontStyle: 'bold',
                            fontColor: 'rgb(54, 143, 3)'
                        },
                        sampleSize: 10,
                        maxRotation: 30,
                        minRotation: 30,
                        min: undefined,
                        max: undefined,
                    },
                    afterFit: (scale) => {
                        scale.height = 40;
                    }
                },
                A: {
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                    display: 'auto',
                    ticks: {
                        backdropPadding: 0,
                    },
                },
                B: {
                    id: 'B',
                    type: 'linear',
                    position: 'right',
                    display: 'auto',
                    ticks: {
                        max: 2,
                        min: -1,
                        stepSize: 1,
                        suggestedMin: 0,
                        suggestedMax: 1,
                    },
                },
            },
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'xy',
                        overScaleMode: 'y',
                        rangeMax: {x: new Date()},
                        onPanComplete: chart => this.onZoom(chart, false)
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        mode: 'xy',
                        overScaleMode: 'y',
                        onZoomComplete: chart => this.onZoom(chart, true)
                    }
                }
            },
        },
    } as Chart.ChartConfiguration<'line'>;

// call of Chart#register()
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.Chart.register(
    Chart.TimeScale, Chart.LinearScale, Chart.LineController,
    Chart.PointElement, Chart.LineElement, zoomPlugin,
);

// chart instantiating
this.chart = new Chart.Chart<'line'>(this.chartContainer.nativeElement, this.chartOptions);

模板

<div class="chart-wrapper">
    <canvas #chart_container id="chart"></canvas>
</div>

样式

.chart-wrapper {
    width: 99%;
    height: calc(100% - 7px);
    margin: 0 auto;
    overflow: hidden;
}

我尝试了什么：

检查数据和数据集；
禁用 chartjs-zoom-plugin；
将options.layout.padding设为0；
将options.responsive设置为false；
将 data.datasets.borderWidth 设置为 1；

如何删除这个“填充”？

Answer 1

此行为来自 offset 选项，此选项在比例尺中，因此条形图不会呈现在 gridLines 上，但它们在它们之间显示得很好。正如文档所述，条形图会自动将此选项设置为 true，而默认情况下它是 false：https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-cartesian-axes

您可以手动将其设置为 false，但该图表中的第一个和最后一个条形会看起来很奇怪，因为它们以半宽呈现：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        type: 'bar',
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        offset: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

更新 chart.js 后图表区域出现奇怪的 "padding" (2.8.0 -> 3.4.1)

Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)

javascript

chart.js

chart.js3