使用 chart.js 在一页中显示多个图表
[英]Multiple charts in one page with chart.js
问题描述
I use chart.js and its dependency, jQuery to draw chart.
我使用 chart.js 及其依赖项 jQuery 来绘制图表。 In my case, I need 2 doughnut charts in one of my page, here's my code:就我而言，我的其中一个页面中需要 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>
When I only have one chart, nothing's gone wrong, but when I try to add one more chart, my charts become so large and my page layout becomes so messy.当我只有一张图表时，没有任何问题，但是当我尝试再添加一张图表时，我的图表变得如此之大，我的页面布局变得如此凌乱。 Can you guys figure out what's wrong with my code?你们能弄清楚我的代码有什么问题吗？ Thanks.谢谢。
3 个解决方案
解决方案1
10 已采纳 2018-11-06 13:04:46
As per chartjs documentation:根据chartjs文档：
Detecting when the canvas size changes can not be done directly from the CANVAS element.
Source: https://www.chartjs.org/docs/latest/general/responsive.html来源： https : //www.chartjs.org/docs/latest/general/responsive.html
You should wrap your canvas into div and add width,height into it.您应该将画布包裹到 div 中并在其中添加宽度、高度。
Here is the change I did这是我所做的改变
<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>
解决方案2
3 2020-04-27 14:04:20
Try to add尝试添加
options: {
responsive: false
}
解决方案3
2 2018-11-06 13:07:04
I found two solutions:我找到了两个解决方案：
You have to put the charts in a container such as a
div.您必须将图表放在一个容器中，例如div。<canvas>is an element semantically dedicated for drawing graphics dynamically via scripting.<canvas>是语义上专用于通过脚本动态绘制图形的元素。<div>is a general-purpose container.<div>是一个通用容器。 The important point is: width and height properties are not the size in px but the ratio between them.重要的一点是：宽度和高度属性不是以px为单位的大小，而是它们之间的比例。 <canvas id="layanan" width="240px" height="240px"></canvas>would result into a 1:1 ratio, but you need a parent container to work with.<canvas id="layanan" width="240px" height="240px"></canvas>将导致 1:1 的比例，但您需要使用父容器。 In the example below, I put a div around each canvas.在下面的示例中，我在每个画布周围放置了一个 div。You can disable this feature by setting
maintainAspectRatiotofalse.您可以通过将maintainAspectRatio设置为false来禁用此功能。 Removing the divs from my code and setting this into yours gives the same result :)从我的代码中删除 div 并将其设置为您的代码会产生相同的结果:)
Cheers!干杯!
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.