ChartJs。如何将线图拉伸到边缘？

Question

我使用ChartJs库构建图形。目前，我的图表有“边距”。我希望将线条图形拉伸到整个宽度和高度，如下所示：

我尝试更改画布的宽度，并且在画布没有全宽的情况下也可以使用，但是我需要使其在全宽上也可以使用：

我的配置：

data: {
    datasets: [
      {
        data: bids,
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        pointRadius: 0,
        backgroundColor: 'rgba(58, 196, 174, 0.4)',
        borderColor: '#3ac4ae',
        lineTension: 0.7,
        borderJoinStyle: 'miter',
      },
      {
        data: asks,
        pointRadius: 0,
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        backgroundColor: 'rgba(255, 107, 66, 0.4)',
        borderColor: '#ff6b42',
        lineTension: 0.7,
        cubicInterpolationMode: 'default',
        borderJoinStyle: 'miter',
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          display: true,
          type: 'linear',
          gridLines: {
            borderDashOffset: 0,
            display: true,
            color: 'rgba(255, 255, 255, .1)'
          },
          ticks: {
            autoSkip: false,
            callback: (value, index, values) => {
              console.log('valueskol', values)
              return value
            },
            beginAtZero: true,
            padding: 20,
          },
        }
      ],
      yAxes: [
        {
          display: true,
          type: 'linear',
          position: 'left',
          gridLines: {
            display: true,
            color: 'rgba(255, 255, 255, .1)',
            drawBorder: false,
            offsetGridLines: true,
            tickMarkLength: 0,
            drawOnChartArea: true
          },
          ticks: {
            min: 0.02,
            padding: 20,
            stepSize: 0.1,
          }
        }

如果有人可以帮助我，将不胜感激。

Answer 1

将xAxes.ticks.min设置为最小值X，将.max设置为最大值，并将yAxes.ticks.padding设置为0。

这是一个例子。我必须补一些数字，因为您的帖子中缺少数据：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        data: [{
          x: 1,
          y: 12
        }, {
          x: 2,
          y: 11
        }, {
          x: 3,
          y: 10
        }, {
          x: 4,
          y: 1
        }, ],
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        pointRadius: 0,
        backgroundColor: 'rgba(58, 196, 174, 0.4)',
        borderColor: '#3ac4ae',
        lineTension: 0.7,
        borderJoinStyle: 'miter',
      },
      {
        data: [{
          x: 6,
          y: 1
        }, {
          x: 7,
          y: 3
        }, {
          x: 8,
          y: 5
        }, {
          x: 9,
          y: 11
        }, ],
        pointRadius: 0,
        fill: true,
        pointHitRadius: 10,
        pointBorderWidth: 0,
        pointHoverRadius: 4,
        pointHoverBorderColor: 'white',
        pointHoverBorderWidth: 2,
        backgroundColor: 'rgba(255, 107, 66, 0.4)',
        borderColor: '#ff6b42',
        lineTension: 0.7,
        cubicInterpolationMode: 'default',
        borderJoinStyle: 'miter',
      }
    ]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        display: true,
        type: 'linear',
        gridLines: {
          borderDashOffset: 0,
          display: true,
          color: 'rgba(255, 255, 255, .1)'
        },
        ticks: {
          autoSkip: false,
          callback: (value, index, values) => {
            console.log('valueskol', values)
            return value
          },
          beginAtZero: true,
          padding: 20,

          min: 1,
        },
      }],
      yAxes: [{
        display: true,
        type: 'linear',
        position: 'left',
        gridLines: {
          display: true,
          color: 'rgba(255, 255, 255, .1)',
          drawBorder: false,
          offsetGridLines: true,
          tickMarkLength: 0,
          drawOnChartArea: true
        },
        ticks: {
          padding: 0,
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>