Chartjs 顶部的小偏移量

Question

HTML

<body>
    
    <div style = "width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
            
            <div style = "width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
                
                <canvas id="canvas" style = "width:300px; height:300px; background-color:green"></canvas>
            
            </div>
    
    </div>
    
</body>

JAVASCRIPT

<script>

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d"); 
var radius  = 0.5;

var options = 
{
 title:
 {
  display:false,
 },
  
 legend:
 {
  display:false
 },  
  
 tooltip:
 {
  enabled:false
 }, 

 animation: 
 {
  duration: 0
 }
}

var data = 
{
 datasets: 
 [
  {
   data:            [50, 50],
   backgroundColor: ["blue", "red"],
   borderWidth:     0
  }
 ]
}


var chart = 
new Chart(context, 
{
 type:       "doughnut",
 
 cutout:     100 * radius,
 responsive: true,
  
 data:       data, 
 options:    options

}); 

</script>

FIDDLE

https://jsfiddle.net/t5a41rdj/

根据标题，尽管禁用了图例和标题，但这张图表顶部有一点偏移我似乎无法摆脱。

我明显遗漏了什么吗？

Answer 1

这是因为您没有禁用图例、标题或工具提示。如果将鼠标悬停在图表上，您会看到工具提示仍在工作，默认情况下标题是隐藏的。为什么图例不显示我真的不知道，应该仍然显示 1 个未定义的项目作为文本。但是，如果您在正确的 space 中使用 plugins 名称 space 禁用它，您会看到额外的填充消失了。

还必须在不在新图表根目录中的选项中配置 cutout 和 responsive:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var radius = 0.5;

var options = {
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false
    }
  },
  animation: {
    duration: 0
  },
  cutout: 100 * radius,
  responsive: true,
}

var data = {
  datasets: [{
    data: [50, 50],
    backgroundColor: ["blue", "red"],
    borderWidth: 0,
  }]
}


var chart =
  new Chart(context, {
    type: "doughnut",
    data: data,
    options: options

  });

<body>
  <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
    <div style="width:300px; height:300px; display:flex; align-items:center; justify-content:center; background-color:blue">
      <canvas id="canvas" style="width:300px; height:300px; background-color:green"></canvas>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Chartjs 顶部的小偏移量

Chartjs small offset on top

javascript

chart.js