chart.js 切断 canvas - 但填充使甜甜圈非常小

Question

我做了一个甜甜圈 chart.js。

没有填充 canvas 就像

一样被截断

首先我尝试添加这段代码

   options: {
  cutoutPercentage: 85,

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

它适用于填充，但 canvas 然后变得非常小，如

甜甜圈在智能手机上已经很小了，但这太小了...

source code on github

有人对此问题有替代解决方案吗？

Answer 1

我发现大部分问题是您代码的 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 上的样子。

chart.js 切断 canvas - 但填充使甜甜圈非常小

chart.js cuts off canvas - but padding makes doughnut very small

javascript

styling

chart.js