填充在我的 chartjs 折线图中不起作用

问题描述

我使用的是最新版本的 chart.js (3.2.1)。如果我将其设置为正值，则填充有效。但是填充 0（或负值）不会将折线图准确设置在画布的边界处

options: {

        layout: {
            padding:0
        },interaction: {
            intersect: false,},plugins: {
            tooltip: {
                backgroundColor: 'transparent',displayColors: false,bodyFontSize: 14,titleColor: 'rgba(83,255,228,1)',callbacks: {
                    label: function (tooltipItems,data) {
                        return 'BMI: ' + tooltipItems.raw;
                    }
                }
            },legend: {
                display: false,elements: {
            point: {
                radius: 6,hiTradius: 6,hoverRadius: 6
            }
        },scales: {
            xAxes: {
                display: false,yAxes: {
                display: false,}
    }

解决方法

图表配置中的填充不是用于将画布样式设置为其他元素，填充所做的唯一事情是添加在画布边缘和线条之间留出一点空间的能力，根据您提供的图像似乎它走到了画布的尽头，空白区域是画布下方的另一个元素。

如您在此示例中所见，画布背景为灰色，并且带有 padding: 0 的线条按预期接触画布的末端

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
      },{
        label: '# of Points',data: [7,11,8,7],borderWidth: 1
      }
    ]
  },options: {
    plugins: {
      tooltip: {
        backgroundColor: 'transparent',displayColors: false,bodyFontSize: 14,titleColor: 'rgba(83,255,228,1)',callbacks: {
          label: function(tooltipItems,data) {
            return 'BMI: ' + tooltipItems.raw;
          }
        }
      },legend: {
        display: false,},interaction: {
      intersect: false,layout: {
      padding: 0
    },elements: {
      point: {
        radius: 0
      }
    },scales: {
      y: {
        display: false
      },x: {
        display: false
      }
    }
  }
}

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

canvas {
  background-color: #eee;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>

chart.js3 linegraph