使用 chart.js 在一页中显示多个图表答案

【问题标题】：Multiple charts in one page with chart.js使用 chart.js 在一页中显示多个图表
【发布时间】：2020-04-27 22:04:20
【问题描述】：

我使用 chart.js 及其依赖项 jQuery 来绘制图表。就我而言，我的一个页面中需要 2 个甜甜圈图，这是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

    <title>Document</title>
    <script>
        $(function () {
            var ctx = document.getElementById("layanan").getContext('2d');
            var data = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

    </script>
</head>

<body>
    <canvas id="layanan" width="240" height="240"></canvas>
    <canvas id="layanan_subbagian" width="240" height="240"></canvas>
</body>

</html>

当我只有一张图表时，一切正常，但当我尝试再添加一张图表时，我的图表变得如此之大，我的页面布局变得如此凌乱。你们能弄清楚我的代码有什么问题吗？谢谢。

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

根据 chartjs 文档：

检测画布大小何时更改不能直接从画布元素。 Chart.js 使用其父容器来更新画布渲染和显示尺寸。但是，这种方法需要相对定位并专用于图表的容器仅限帆布。然后可以通过设置相对容器大小的值

来源：https://www.chartjs.org/docs/latest/general/responsive.html

你应该将你的画布包裹到 div 中，并在其中添加宽度、高度。

这是我所做的更改

<div style="width:240px;height:240px">
    <canvas id="layanan"></canvas>
    </div>
    <div style="width:240px;height:240px">
    <canvas id="layanan_subbagian" ></canvas>
    </div>

$(function () {
            var ctx = document.getElementById("layanan").getContext('2d');
            var data = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

    <title>Document</title>
    

    <div style="width:240px;height:240px">
    <canvas id="layanan"></canvas>
    </div>
    <div style="width:240px;height:240px">
    <canvas id="layanan_subbagian" ></canvas>
    </div>

【讨论】：

谢谢！像魅力一样工作
有没有办法动态地做到这一点，我的意思是通过创建一个 ctx 来填充两个画布，我需要在一个页面中使用 9 个图表并且每次都声明它太长了。

【解决方案2】：

尝试添加

options: {

            responsive: false
        }

【讨论】：

【解决方案3】：

我找到了两个解决方案：

您必须将图表放入容器中，例如div。 <canvas> 是语义上专用于通过脚本动态绘制图形的元素。 <div> 是一个通用容器。重要的一点是：width 和 height 属性不是以 px 为单位的大小，而是它们之间的比率。 <canvas id="layanan" width="240px" height="240px"></canvas> 会产生 1:1 的比例，但您需要 父容器 才能使用。在下面的示例中，我在每个画布周围放置了一个 div。
您可以通过将maintainAspectRatio 设置为false 来禁用此功能。从我的代码中删除 div 并将其设置到您的代码中会产生相同的结果:)

干杯！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>

    <title>Document</title>
    <script>
        $(function () {
            var ctx = document.getElementById("layanan").getContext('2d');
            var data = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });

            var ctx_2 = document.getElementById("layanan_subbagian").getContext('2d');
            var data_2 = {
                datasets: [{
                    data: [10, 20, 30],
                    backgroundColor: [
                        '#3c8dbc',
                        '#f56954',
                        '#f39c12',
                    ],
                }],
                labels: [
                    'Request',
                    'Layanan',
                    'Problem'
                ]
            };
            var myDoughnutChart_2 = new Chart(ctx_2, {
                type: 'doughnut',
                data: data_2,
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 12
                        }
                    }
                }
            });
        });

    </script>
</head>

<body>
  <div>
      <canvas id="layanan" width="240px" height="240px"></canvas>
  </div>

  <div>
      <canvas id="layanan_subbagian" width="240px" height="240px"></canvas>
  </div>
</body>

</html>

【讨论】：