ChartJS 如何减少圆环图的大小并固定圆环图的大小

4szc88ey  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(616)

我有一个使用chart js建立的环圈图。我想要一个固定大小的环圈图,不管它有多少数据。检查图像看起来有多糟它有371个图例。我该如何固定环圈图的大小?
Doughnut Chart

iih3973s

iih3973s1#

您可以尝试两个步骤:height(HTML/CSS)和aspectRation(JS)。
height将控制de 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

相关问题