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

问题描述

我使用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,backgroundColor: 'rgba(255,107,66,borderColor: '#ff6b42',cubicInterpolationMode: 'default',}
    ]
  },options: {
    responsive: true,legend: {
      display: false
    },scales: {
      xAxes: [
        {
          display: true,type: 'linear',gridLines: {
            borderDashOffset: 0,display: true,color: 'rgba(255,255,.1)'
          },ticks: {
            autoSkip: false,callback: (value,index,values) => {
              console.log('valueskol',values)
              return value
            },beginAtZero: true,padding: 20,}
      ],yAxes: [
        {
          display: true,position: 'left',gridLines: {
            display: true,.1)',drawBorder: false,offsetGridLines: true,tickMarkLength: 0,drawOnChartArea: true
          },ticks: {
            min: 0.02,stepSize: 0.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,{
          x: 7,y: 3
        },{
          x: 8,y: 5
        },{
          x: 9,backgroundColor: 'rgba(255,107,66,borderColor: '#ff6b42',cubicInterpolationMode: 'default',}
    ]
  },options: {
    responsive: true,legend: {
      display: false
    },scales: {
      xAxes: [{
        display: true,type: 'linear',gridLines: {
          borderDashOffset: 0,display: true,color: 'rgba(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,position: 'left',gridLines: {
          display: true,.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>