如何缩小甜甜圈图表的大小并固定甜甜圈的大小

Question

我有一个使用chart js构建的甜甜圈图。我想要一个固定大小的甜甜圈图，无论它有多少数据。查看图片，它看起来有多糟糕。它有371个图例。如何调整甜甜圈图的大小？

圆环图

Answer 1

您可以尝试两个步骤：HTML/CSS的height和JS的aspectRation。

height将控制图形所在的DIV，这可能会解决您的问题。此外，请寻找没有丢失的DIV或类似的东西。

<div class="col-md-12">
<script type="text/javascript" src="https://npmcdn.com/chart.js@latest/dist/chart.min.js"></script>
<canvas id="graphicID" style="height:50vh;"></canvas>
</div>

之后，您可能会注意到图形大小太小，无法填充所有可用的DIV空间。为此，您需要查看aspectRation，它控制DIV中图形的大小。doughnut的默认值是1，但对我来说，1.4是一个不错的方法。

const config = {
type: 'doughnut',
data: data,
options: {
aspectRatio: 1.4,
}
};

欲了解更多信息，请查看https://www.chartjs.org/docs/latest/configuration/responsive.html