Блог

Я создал пончик chart.js .

Без заполнения холст обрезается, как

сначала я попытался добавить этот код

    options: {
  cutoutPercentage: 85,

  layout: {
    padding: {
      bottom: 20
    }
  },
  

Это работает для заполнения, но затем холст становится действительно маленьким, как

Пончик уже был довольно маленьким в представлении смартфона, но это слишком мало…

исходный код на github

У кого-нибудь есть альтернативное решение этой проблемы?

Я обнаружил, что plugins часть вашего кода вызывала большую часть проблемы.

Я экспериментировал с дополнительной высотой, установленной в plugins , чтобы ваш plugins и options выглядел так:

 options: {
  cutoutPercentage: 85,
  layout: {
    padding: {
      bottom: 5
    }
  },
  legend: {
    labels: {
      fontColor: '#384241',
      boxWidth: 7,
      fontFamily: "'arla-thin'"
    }
  }
},
plugins: [{
  beforeInit: function (chart, options) {
    chart.legend.afterFit = function () {
      this.height = this.height   5;
    }
  }
}]
  

Я также изменил #usersChart css на margin-bottom: 20px; , чтобы уменьшить разрыв.

Вот как это выглядит на Galaxy S5.