chartjs не следует за высотой, когда родительский рост равен 200 пикселей - PullRequest
Новая
       61

chartjs не следует за высотой, когда родительский рост равен 200 пикселей

1 голос
/ 25 октября 2019

Я использую vue-chartjs для отображения кольцевой диаграммы. Я хочу, чтобы диаграмма следовала за высотой родителя (200px).

Я попытался установить для параметра maintainAspectRatio значение false, он уменьшился, но все еще не помещается в родительский элемент div.

Это опция, которую я использую для диаграммы. 

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,
  name: 'Pie_Chart',
  props: ["rating"],
  mounted() {
    this.renderChart({
      legend: { display: false },
      datasets: [{
        backgroundColor: ['#DAE02A', '#6D6D6D'],
        data: [1000, this.$props.rating],
        borderWidth: 0
      }]
    }, {
      responsive:true,
      maintainAspectRatio: false,
      cutoutPercentage: 80,
      legend: { display: false },
      tooltips: { enabled: false },
      hover: { mode: false },
    })
  },
}

Хотя ширина диаграммы вписывается в родительский div, но все еще есть некоторое свободное пространство над и под диаграммой, которое вызывает высотуне вписаться в родительский div.

рабочий пример моей проблемы

перед добавлением keepAspectRatio before adding maintainAspectRatio после добавления keepAspectRatio after adding maintainAspectRatio после установки ширины родительского элемента after setting width of parent сгенерированного html enter image description here

1 Ответ

2 голосов
/ 25 октября 2019

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

Результат, который вы хотите получить, возможен, поэтому ниже приведен фрагмент диаграммы с пончиками. размером до 200 на 200 пикселей (для ясности я добавил background-color к div): 

new Chart(document.getElementById("chart"), {
  type: "doughnut",
  data: {
    datasets: [{
      data: [1, 4]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutoutPercentage: 80,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    hover: {
      mode: false
    }
  }
});
div {
  background-color: #ccf;
  width: 200px;
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div>
  <canvas id="chart"></canvas>
</div>
...