javascript - 使用 chart.js 在一页中显示多个图表
问题描述
我使用 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 文档:
无法直接从 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>
推荐阅读
- node.js - 当我想上传图片时,这个脚本有什么问题?
- python - 在 SublimeREPL 中的输入接收 NameError
- java - 使用 2 个 int 数组创建二维数组
- java.util.scanner - Java 帮助:运行 2 个相互连接的循环。扫描仪同时
- asp.net - Blazor 服务和 3g、4g 用户
- mongodb - 在部署的流星应用程序上连接到 mongoDB
- javascript - 禁用 antd DatePicker 未来页面
- pine-script - 如何在 pinescript 的 1 分钟蜡烛中逐秒学习音量变化?
- fortran - 从 FORTRAN 中的字符串获取子字符串的问题
- discord - discord.js 机器人的自动化测试