Question

在白色容器的左侧和右侧，您可以看到图形没有完全在两侧接触，只有少量填充，我根本无法删除它。

我尝试将layout.padding.left设置为负值，但这没有影响，但是正值确实会将图表向内移动，顶部和底部填充也是如此。

我想出的唯一解决方案是在容器内添加另一个div，并使画布宽度变大，然后使用左负边距将其放置，使线接触.container角。像jsfiddle这样，但这只是一个临时解决方案。

var options = {
  type: 'line',
  data: {
    labels: ['', 'november', 'december', 'january', 'february', 'march', 'may', ''],
    datasets: [{
      data: [80, 100, 100, 115, 119, 105, 100, 90],
      pointRadius: [0, 5, 5, 5, 5, 5, 5 , 0],
      pointHoverRadius: [0, 7, 7, 7, 7, 7, 7, 0],

      borderColor: '#3ca2e0',
      backgroundColor: 'rgba(60, 162, 224, .1)',
      lineTension: 0.6,

      // points
      pointBackgroundColor: '#3ca2e0',
      pointHoverBackgroundColor: '#3ca2e0',

      pointBorderColor: '#ffffff',
      pointHoverBorderColor: '#ffffff',

      pointBorderWidth: 2.5,

      pointHitRadius: 10,
      radius: 5,

      borderWidth: 2.5
    }],
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          display: false,
          
        },
        gridLines: {
          drawBorder: false,
          display: false,
          drawTicks: false
        }
      }],
      xAxes: [{
        gridLines: {
          drawBorder: false,
          display: false
        },
        ticks:{
          fontColor: '#858585'
        }
      }]
    },
    layout: {
      padding: {
      	top: 10,
      }
    }
  },
}

var ctx = document.getElementById('chartJSContainer');
new Chart(ctx, options);

body { background-color: #1c2128 }

.container {
  width: 500px;
  background-color: #ffffff;
  margin: 20px auto;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<body>
  <div class="container">
     <canvas id="chartJSContainer" width="500" height="200"></canvas>
  </div>
</body>

Answer 1

一种解决方案是使用第二个容器。

画布似乎根据其父宽度进行调整。

firebase-config

<body>
  <div class="container">
    <div class="canvas-container">
      <canvas id="chartJSContainer" width="500" height="200"></canvas>
    </div>
  </div>
</body>

如何从画布/图表中删除左右填充？

1 个答案: