使用 chart.js 在一頁中顯示多個圖表
[英]Multiple charts in one page with 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>
當我只有一張圖表時，沒有任何問題，但是當我嘗試再添加一張圖表時，我的圖表變得如此之大，我的頁面布局變得如此凌亂。 你們能弄清楚我的代碼有什么問題嗎？ 謝謝。
3 個解決方案
解決方案1
10 已采納 2018-11-06 13:04:46
根據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>
解決方案2
3 2020-04-27 14:04:20
嘗試添加
options: {
responsive: false
}
解決方案3
2 2018-11-06 13:07:04
我找到了兩個解決方案：
您必須將圖表放在一個容器中，例如
div。<canvas>是語義上專用於通過腳本動態繪制圖形的元素。<div>是一個通用容器。 重要的一點是：寬度和高度屬性不是以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>
滾動到該部分時，在一頁中呈現多個 chart.js 圖表
[英]Rendering multiple chart.js charts in one page when scroll to the section
Angular 5，Chart.js 顯示多個圖表，每個選項卡一個
[英]Angular 5, Chart.js displaying multiple charts, one on each tab
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.