我正在使用chart.js在一个Angular 组件中显示一个折线图。代码没有为图表添加任何填充或边距。我添加了样式，在.ts文件和样式表中创建图表时将填充和边距设置为零，没有任何区别。当我在Chrome开发者模式下检查元素时，它没有显示任何填充或边距。所以我认为样式是chart.js内部的。下面是chart元素在Chrome开发者模式下高亮显示的屏幕截图。x1c 0d1x
如您所见，图表画布元素的左侧、底部和右侧都有边距或边框，但奇怪的是，不是在顶部。Y轴标签和图表左侧之间的间距在移动的上查看时尤其糟糕，所以我真的需要删除它。我花了几个小时将我能想到的每个元素都设置为0填充和0边距，尝试对代码和样式表进行不同的更改，并在互联网包括Stackoverflow，但似乎没有一个能回答这个问题。
我还尝试添加框大小：border-box;添加到包含图表的div容器中，但没有任何区别，如本文所建议的：Why is chart.js canvas not respecting the padding of the container element?
以下是我的图表配置：

this.myChart = new Chart("chartCanvas", {
        type: 'line',
        data: {
          labels: labelVars,
          datasets: datasets
        },
        options: {
          elements: {
            point: {
              radius: 0
            },
          },
          responsive: true,
          maintainAspectRatio: false,
          tooltips: {
            mode: 'index',
            intersect: false,
            enabled: width > 640
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          legend: {
            display: false,
            position: 'bottom',
            labels: {
            }
          },
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'week',
                tooltipFormat: 'MM/DD/YYYY'
              },
              display: true,
              scaleLabel: {
                display: true,
                labelString: ''
              },
              ticks: {
                autoSkip: true,
                padding: 0,
                maxTicksLimit: this.getTickLimit(),
                maxRotation: this.getRotation(),
                minRotation: this.getRotation()
              },
              gridLines: {
                display: false,
                offsetGridLines: true
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: ''
              },
              ticks: {
                maxTicksLimit: 6,
                beginAtZero: false
              }
            }]
          }
        }
      });

下面是当前的html：

<div class="chartContainer">
        <canvas *ngIf="displayChart" id="chartCanvas"></canvas>
    </div>

下面是当前的CSS：

#chartCanvas {
    padding-left: 0;
    margin-left: 0;
  }

  .chartContainer {
    height: 500px;
    margin: 0;
    padding: 0;
    align-items: left;
    align-self: left;
    align-content: left;
  }

还有其他人遇到过这个问题吗？