Как удалить левый и правый отступ с холста / диаграммы? - PullRequest
Новая
       21

Как удалить левый и правый отступ с холста / диаграммы?

0 голосов
/ 26 мая 2019

С левой и правой стороны белого контейнера вы можете видеть, что график не соприкасается полностью с обеих сторон, имеется небольшое количество отступов, и я не могу его удалить вообще.

Я попытался установить layout.padding.left в отрицательное значение, но это не повлияло, хотя положительное значение действительно перемещает диаграмму внутрь, то же самое относится к верхнему и нижнему отступам.

Единственное решение, которое я придумал, - это добавить еще один div внутри контейнера, увеличить ширину холста, а затем с помощью левого отрицательного поля расположить его, чтобы линия коснулась углов .container. Например, jsfiddle , но это только временное решение.

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>

1 Ответ

1 голос
/ 26 мая 2019

Одним из решений будет использование второго контейнера.

Кажется, что размер холста изменяется в зависимости от его родительской ширины. 

<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;
}
...