var ctx = document.getElementById("chartjs-1"); //chartjs-女性ID?で取得できれば一つの記述でいけるかもしれません。 var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "女性評価", data: [4, 4, 5, 4, 5], //女性IDに紐づいた数 backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, }); var ctx = document.getElementById("chartjs-2"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "前期試験成績", data: [5, 4, 5, 4, 5], backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, }); var ctx = document.getElementById("chartjs-3"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "前期試験成績", data: [4, 5, 5, 4, 5], backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, }); var ctx = document.getElementById("chartjs-4"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "前期試験成績", data: [4, 4, 4, 5, 5], backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, }); var ctx = document.getElementById("chartjs-5"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "前期試験成績", data: [4, 4, 5, 5, 4], backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, }); var ctx = document.getElementById("chartjs-6"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["第一印象", "清潔感", "癒し", "サービス", "コスパ"], datasets: [{ label: "前期試験成績", data: [5, 4, 5, 4, 4], backgroundColor: "rgba(67, 133, 215, 0.5)", //グラフ背景色 borderColor: "rgba(67, 133, 215, 1)", //グラフボーダー色 }] }, options: { responsive: true, // maintainAspectRatio: true, //label非表示 plugins: { legend: { display: false, }, }, scale: { max: 5, //最大値 min: 0, //最小値 stepSize: 1, //区切り値 }, scales: { r: { backgroundColor: 'white', // 背景色 // グリッドライン grid: { color: '#231815', lineWidth: 0.5, }, // アングルライン angleLines: { color: '#231815', lineWidth: 0.5, }, // ポイントラベル pointLabels: { color: 'black', // font: { // size: 10, // weight: 'bold', // }, font: function (context) { var width = context.chart.width; // var size = Math.round(width / 25); var size = Math.round(width / 21); return { size: size, weight: 600, }; }, // backdropColor: 'unset', // backdropPadding: 5, // padding: 20, }, }, }, }, });