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

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

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

画布似乎根据其父级宽度调整大小。

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

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #1c2128;
}

.container {
  width: 490px;
  overflow: hidden;
  margin: 20px auto;
}

.canvas-container {
  width: 500px;
  background-color: #ffffff;
  height: 200px;
  margin-left: -5px;
}

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

问题描述

1 个解决方案

解决方案1
1 2019-05-26 07:49:31

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

问题描述

1 个解决方案

解决方案1 1 2019-05-26 07:49:31

解决方案1
1 2019-05-26 07:49:31