程序员经验分享-hwhale

使用 Chart.js 在一页中显示多个图表

2023-12-19

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

当我只有一张图表时，没有什么问题，但当我尝试添加一张图表时，我的图表变得很大，页面布局变得很混乱。你们能找出我的代码有什么问题吗？谢谢。


根据 Chartjs 文档：

无法直接检测画布大小何时发生变化 画布元素。 Chart.js 使用其父容器来更新 画布渲染和显示尺寸。然而，该方法需要 容器相对定位并专用于图表 仅画布。然后可以通过设置相对值来实现响应性 容器尺寸的值

Source: https://www.chartjs.org/docs/latest/general/responsive.html 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

chartjs

使用 Chart.js 在一页中显示多个图表 的相关文章

随机推荐

  • 在每个 PHP 回溯级别获取范围内的变量？

    有没有办法在回溯中查看每个堆栈帧中设置的变量 我可以通过组合来非常接近debug backtrace true 来获取对象 get object vars在每个对象上获取 this vars args每个回溯帧中的键 以及get defin

  • 为什么FocusNode需要在flutter中进行处置？

    我有点很困惑何时使用dispose扑腾中 有关于这方面的好的教程吗 在食谱中https flutter io docs cookbook forms focus https flutter io docs cookbook forms fo

  • 在 Android 中将视频流传输到网络

    我想制作一个可以将视频流传输到网络的 Android 应用程序 我知道如何在 Android 中录制视频 但不知道如何将其流式传输到网络 我不想将此视频存储到手机的 SD 卡上 但我希望将其存储在网络上 为此 我计划使用 ASP NET W

  • AWS ECS：运行任务失败原因：[“ATTRIBUTE”]

    当尝试在 EC2 实例中运行任务时 我收到了这条可怕的错误消息 Run tasks failed Reasons ATTRIBUTE 和其他许多人一样 https stackoverflow com questions 45173637 u

  • 如何防止在未插入行时触发插入触发器？

    我有一个表1 在此表上我创建了一个触发器 插入或更新或删除之后 现在 如果我执行一个不插入任何内容的插入 触发器仍然会被触发 insert into TABLE1 select from TABLE1 where 1 0 该查询不会插入任何

  • IObservable 按下的按键

    所以我可以尝试反应式扩展 我想创建一个用户按下的按键的 IObservable 我怎样才能做到这一点 这是一个 C 控制台应用程序 尝试这样做来获取可观察的读取键序列 IObservable

  • 如何使用 C# .NET CORE 2.0 将 FIX 登录消息发送到 GDAX

    我正在尝试建立一个到 fix gdax com 的 FIX 4 2 会话 文档 https docs gdax com fix api https docs gdax com fix api 使用 C 和 Net Core 2 0 当我尝试

  • .NET 内部编码

    NET 应用程序的内部编码是什么 例如字符串对象 我可以定义我的应用程序应使用什么编码吗 如果我将 net 字符串写入文件 字符串是什么编码 edit Dim test as String Das ist ein Test lt what

  • Amazon S3 预签名 url - 手动或一次性上传无效

    我正在使用 S3 接受用户到 S3 的直接上传 因此我将使用预签名的网址 上传成功后 AWS Lambda会确保上传的文件是图像 然后客户端会告诉我的服务器他已经完成上传 然后我的服务器将检查该文件是否存在于 S3 中 如果 Lambda

  • 为什么pygame中的文字显示2秒

    我显示的文本仅显示约 2 秒 我希望当我点击其他区域时它会显示 elif msg 0 7 YOU WIN and Message id 200 print You Win textSurface font render You Win Tr

  • Rails - 回形针 - 多张照片上传不保存

    我正在尝试在 Rails 中创建一个创建产品页面 这包括添加多个图像和文本字段 我有一种产品模型和一种照片模型 我正在使用回形针宝石来上传照片 但当我查看产品页面时 我没有看到任何图片 照片未保存到数据库中 附 我使用 HAML 应用程序

  • 为什么 `id id` 不是 OCaml 中的值？

    我仍在尝试理解 OCaml 中的值限制 并且我正在通读赖特的论文 https cs au dk hosc local LaSC 8 4 pp343 355 pdf 其中指出 fun x gt x fun y gt y 不是一个语法值 同时它

  • Google Apps 表单脚本中的动态选择选项

    I have 这个表格 https docs google com forms d 1wVvo rabq xxXTnWVRDBIwmRCKOA09QAtbNfbRWEG6Y viewform 如果您看到列表项目 学生姓名和成绩正在从 Goo

  • React-virtualized InfiniteLoader/List - 使用 AJAX 的工作示例

    我正在做一个 React Redux 项目 需要实现一个虚拟化 无限加载列表 react virtualized似乎打算完成这项工作 但即使在阅读了所有可用文档并阅读了许多 StackOverflow 帖子之后 我仍无法使其工作或找到有关组

  • 如何计算两个字符串共有的字符数？

    如何计算两个字符串之间的字符交集 例如 假设我们有一个名为String intersection abc intersection ab 2 hello intersection hallo 4 好的 孩子们 感谢你们的大量反馈 更多示例

  • Windows驱动程序内核：如何枚举所有子目录和文件？

    我正在一个小型 antirootkit 中工作 我需要添加一个功能 删除 rootkit 目录和您可能的子目录中的所有文件 那么 首先有必要知道所有这些目录和文件 对吗 为此 我下面的代码已经完成了这项任务的一半 他枚举特定目录的所有目录和

  • Mongodb基于unix时间戳按天聚合

    我用谷歌搜索了很多 但没有找到任何有用的解决方案 我想找到每日用户总数 我有一个名为会话日志有如下文件 id ObjectId 52c690955d3cdd831504ce30 SORTID NumberLong 1388744853 PL

  • 是否有一种编程语言具有完整且正确的 Unicode 支持？

    大多数编程语言都有some支持 Unicode 但都有一些或多或少记录在案的极端情况 在这些情况下 事情将无法正常工作 Examples Java StringBuilder StringBuffer中的reverse 工作正常 但是 St

  • R 中矩阵的最大大小

    我正在使用 igraph 进行一些网络分析 作为其中的一部分 我必须创建一个包含 2 列和与链接数量相同的行的矩阵 我有一个大型网络 数百万个链接 并且在运行 3 小时后创建此矩阵不起作用 没有错误 只是没有结果 并且显示 未响应 这样的字

  • 使用 Chart.js 在一页中显示多个图表

    我使用 Chart js 及其依赖项 jQuery 来绘制图表 就我而言 我的页面之一需要 2 个圆环图 这是我的代码

热门标签