如何设置环形图（Doughnut）标签的ctx填充位置，使浮动圆圈对齐

要实现图例中浮动圆圈与文字在一行内正确对齐，只需调整图例项的CSS样式：

• 找到图例列表项的样式（对应代码中的.legend li），添加以下样式：

  .legend li {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* 可选，保持项之间的间距 */
  }
  

• 同时调整图例中的圆圈元素（.legend .dot）样式，移除浮动属性并设置右侧间距：

  .legend .dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    /* 移除原来的 float: left; */
  }
  

原理是通过Flex布局让每个图例项内的圆圈和文字在水平方向排列，同时垂直居中对齐，替代原来的浮动布局，避免因浮动导致的对齐错位问题。

内容的提问来源于stack exchange，提问作者dei_sudo