Question

我使用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>

当我只有一个图表时，没有任何问题，但是当我尝试再添加一个图表时，我的图表变得很大，页面布局也变得如此混乱。你们能弄清楚我的代码有什么问题吗？谢谢。

Answer 1

根据chartjs文档：

无法直接从画布上检测何时更改画布大小 CANVAS元素。 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>

Answer 2

我找到了两种解决方案：

您必须将图表放入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>

Answer 3

尝试添加

options: {

            responsive: false
        }

使用chart.js在一页中包含多个图表

3 个答案: