ChartJS 圆环图裁剪边缘

Question

我有一个显示收入数据圆环图的小部件。我遇到的问题是在两侧，甜甜圈的边缘被切掉了。看起来图表溢出 canvas，但我不确定为什么。

这里是选项和数据：

    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          label: function (context) {
            return ` ${context.label}: ${context.formattedValue}%`;
          },
        },
      },
    },
    offset: 12,
    borderRadius: 4,
    elements: {
      arc: {
        borderWidth: 0,
      },
    },
  };

  const data = {
    labels: chartLabels,
    datasets: [
      {
        data: chartData,
        backgroundColor: colors,
      },
    ],
  };

在HTML中，这是创建的：

<canvas role="img" height="360" width="360" style="display: block; box-sizing: border-box; height: 180px; width: 180px;"></canvas>

这就是图表的样子。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

我希望你将它与 react 一起使用

您需要将导入包装在嵌套的 <div> 中，并且需要为父级 div 添加 display: flex，还需要删除 offset:12 检查以下代码片段

        <div style={{ display: "flex" }}>
          <div>
            <Doughnut
              data={data}
              options={{
                plugins: {
                  legend: {
                    display: false,
                  },
                  tooltip: {
                    callbacks: {
                      label: function (context) {
                        return ` ${context.label}: ${context.formattedValue}%`;
                      },
                    },
                  },
                },
                borderRadius: 4,
                elements: {
                  arc: {
                    borderWidth: 0,
                  },
                },
              }}
            />
          </div>
        </div>

ChartJS 圆环图裁剪边缘

ChartJS donut chart clipping the edges

canvas

reactjs

chart.js