ハピタス登録で1,000円分になるURL
Chart.js バージョン3で項目ラベルが表示されない！
できた！
めっっっっちゃ苦労したわ。
こうやる
まずは<head>で chartjs-plugin-datalabels を設定してやる必要がある。
15行目がそれ。
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
次にこう。
↑317行目 myChartインスタンスを定義するところ（ctx云々かくところ）で
↑321〜323行目 このpluginsの記述が必須！
かつ
↓400行目 ここ（optionsの中！）でもう一回pluginsの記述が必須！
406行目〜413行目の記述を書いてあげると…
こうなる！
グラフに数値がプロットされてる！
ほんっと苦労した！
Chart.js作ったやつVersion2から3で仕様変えすぎ！アホか！
これだからjavascript好きになれん！でも良かった！！！
コピペ用
<HTML>
<HEAD>
<style>
.box select{
/* width: 100px;
width: 500px;
height: 50px */
border: 1px solid;
font-size: 30px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div style="width:100%">
<canvas id="canvas"></canvas>
</div>
<!--
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js">
<script src="https://unpkg.com/chart.js-plugin-labels-dv@3.0.5/dist/chartjs-plugin-labels.min.js"</script>
<div class="box">
<select onchange="set_img(this.selectedIndex)">
<script language=javascript>
for(nn=0;nn<list_csvv.length;nn++) {
// document.write("<option>" + list_csvv[nn][1]);
document.write("<option>" + list_csvv[nn]);
}
</script>
</select>
</div>
-->
<hr>
<div class="box" align="center">
<!-- <select id="csv-select"> -->
<!-- <label for="csv-select2">選択1</label> -->
<select id="csv-select2" onchange="myFunction2()">
<option value="201903_000425650_看護師保健師等.csv">2019年03月 看護師保健師等</option>
<option value="202006_000689986_看護師保健師等.csv">2020年06月 看護師保健師等</option>
<option value="202007_000705177_看護師保健師等.csv">2020年07月 看護師保健師等</option>
<option value="202008_000722012_看護師保健師等.csv">2020年08月 看護師保健師等</option>
<option value="202009_000740925_看護師保健師等.csv">2020年09月 看護師保健師等</option>
<option value="202010_000759466_看護師保健師等.csv">2020年10月 看護師保健師等</option>
<option value="202011_000778708_看護師保健師等.csv">2020年11月 看護師保健師等</option>
<option value="202012_000803250_看護師保健師等.csv">2020年12月 看護師保健師等</option>
<option value="202101_000826249_看護師保健師等.csv">2021年01月 看護師保健師等</option>
<option value="202102_000844169_看護師保健師等.csv">2021年02月 看護師保健師等</option>
<option value="202103_000862002_看護師保健師等.csv">2021年03月 看護師保健師等</option>
<option value="202104_000880611_看護師保健師等.csv">2021年04月 看護師保健師等</option>
<option value="202105_000905235_看護師保健師等.csv">2021年05月 看護師保健師等</option>
<option value="202106_000928183_看護師保健師等.csv">2021年06月 看護師保健師等</option>
<option value="202107_000952417_看護師保健師等.csv">2021年07月 看護師保健師等</option>
<option value="202108_000977250_看護師保健師等.csv">2021年08月 看護師保健師等</option>
<option value="202109_000999233_看護師保健師等.csv">2021年09月 看護師保健師等</option>
<option value="202110_001023796_看護師保健師等.csv">2021年10月 看護師保健師等</option>
<option value="202111_001048584_看護師保健師等.csv">2021年11月 看護師保健師等</option>
<option value="202112_001075381_看護師保健師等.csv">2021年12月 看護師保健師等</option>
<option value="202201_001102759_看護師保健師等.csv">2022年01月 看護師保健師等</option>
<option value="202202_001120375_看護師保健師等.csv">2022年02月 看護師保健師等</option>
<option value="202203_001139041_看護師保健師等.csv">2022年03月 看護師保健師等</option>
<option value="202204_001162568_看護師保健師等.csv">2022年04月 看護師保健師等</option>
<option value="202205_001188058_看護師保健師等.csv">2022年05月 看護師保健師等</option>
<option value="202206_001209322_看護師保健師等.csv">2022年06月 看護師保健師等</option>
<option value="202207_001233778_看護師保健師等.csv">2022年07月 看護師保健師等</option>
<option value="202208_001260287_看護師保健師等.csv">2022年08月 看護師保健師等</option>
<option value="202209_001284855_看護師保健師等.csv">2022年09月 看護師保健師等</option>
<option value="202210_001312912_看護師保健師等.csv">2022年10月 看護師保健師等</option>
<option value="202211_001338172_看護師保健師等.csv">2022年11月 看護師保健師等</option>
<option value="202212_001367794_看護師保健師等.csv" selected>2022年12月 看護師保健師等</option>
</select>
</div>
<p></p>
<div class="box" align="center">
<select id="csv-select" onchange="myFunction()">
<!--
<option value="sample2.csv">sample2.csv</option>
<option value="sample3.csv">sample3.csv</option>
<option value="202210_001367794_うちＩＴ関連職業.csv">202210_001367794_うちＩＴ関連職業</option>
<option value="202211_001367794_うちＩＴ関連職業.csv">202211_001367794_うちＩＴ関連職業</option>
<option value="202212_001367794_うちＩＴ関連職業.csv">202212_001367794_うちＩＴ関連職業</option>
<option value="202201_001102759_うちＩＴ関連職業.csv">うちIT関連職業202201</option>
<option value="202201_001102759_うちＩＴ関連職業.csv">うちIT関連職業202201</option>
-->
<option value="201901_000396695_うちＩＴ関連職業.csv">2019年01月 うちＩＴ関連職</option>
<option value="201902_000410251_うちＩＴ関連職業.csv">2019年02月 うちＩＴ関連職</option>
<option value="201903_000425650_うちＩＴ関連職業.csv">2019年03月 うちＩＴ関連職</option>
<option value="201904_000443514_うちＩＴ関連職業.csv">2019年04月 うちＩＴ関連職</option>
<option value="201905_000460881_うちＩＴ関連職業.csv">2019年05月 うちＩＴ関連職</option>
<option value="201906_000479362_うちＩＴ関連職業.csv">2019年06月 うちＩＴ関連職</option>
<option value="201907_000498943_うちＩＴ関連職業.csv">2019年07月 うちＩＴ関連職</option>
<option value="201908_000517333_うちＩＴ関連職業.csv">2019年08月 うちＩＴ関連職</option>
<option value="201909_000537958_うちＩＴ関連職業.csv">2019年09月 うちＩＴ関連職</option>
<option value="201910_000555573_うちＩＴ関連職業.csv">2019年10月 うちＩＴ関連職</option>
<option value="201911_000573996_うちＩＴ関連職業.csv">2019年11月 うちＩＴ関連職</option>
<option value="201912_000592376_うちＩＴ関連職業.csv">2019年12月 うちＩＴ関連職</option>
<option value="202001_000609950_うちＩＴ関連職業.csv">2020年01月 うちＩＴ関連職</option>
<option value="202002_000626520_うちＩＴ関連職業.csv">2020年02月 うちＩＴ関連職</option>
<option value="202003_000639657_うちＩＴ関連職業.csv">2020年03月 うちＩＴ関連職</option>
<option value="202004_000656018_うちＩＴ関連職業.csv">2020年04月 うちＩＴ関連職</option>
<option value="201905_000460881_うちＩＴ関連職業.csv">2019年05月 うちＩＴ関連職</option>
<option value="201906_000479362_うちＩＴ関連職業.csv">2019年06月 うちＩＴ関連職</option>
<option value="201907_000498943_うちＩＴ関連職業.csv">2019年07月 うちＩＴ関連職</option>
<option value="201908_000517333_うちＩＴ関連職業.csv">2019年08月 うちＩＴ関連職</option>
<option value="201909_000537958_うちＩＴ関連職業.csv">2019年09月 うちＩＴ関連職</option>
<option value="201910_000555573_うちＩＴ関連職業.csv">2019年10月 うちＩＴ関連職</option>
<option value="201911_000573996_うちＩＴ関連職業.csv">2019年11月 うちＩＴ関連職</option>
<option value="201912_000592376_うちＩＴ関連職業.csv">2019年12月 うちＩＴ関連職</option>
<option value="202001_000609950_うちＩＴ関連職業.csv">2020年01月 うちＩＴ関連職</option>
<option value="202002_000626520_うちＩＴ関連職業.csv">2020年02月 うちＩＴ関連職</option>
<option value="202003_000639657_うちＩＴ関連職業.csv">2020年03月 うちＩＴ関連職</option>
<option value="202004_000656018_うちＩＴ関連職業.csv">2020年04月 うちＩＴ関連職</option>
<option value="202005_000673886_うちＩＴ関連職業.csv">2020年05月 うちＩＴ関連職</option>
<option value="202006_000689986_うちＩＴ関連職業.csv">2020年06月 うちＩＴ関連職</option>
<option value="202007_000705177_うちＩＴ関連職業.csv">2020年07月 うちＩＴ関連職</option>
<option value="202008_000722012_うちＩＴ関連職業.csv">2020年08月 うちＩＴ関連職</option>
<option value="202009_000740925_うちＩＴ関連職業.csv">2020年09月 うちＩＴ関連職</option>
<option value="202010_000759466_うちＩＴ関連職業.csv">2020年10月 うちＩＴ関連職</option>
<option value="202011_000778708_うちＩＴ関連職業.csv">2020年11月 うちＩＴ関連職</option>
<option value="202012_000803250_うちＩＴ関連職業.csv">2020年12月 うちＩＴ関連職</option>
<option value="202101_000826249_うちＩＴ関連職業.csv">2021年01月 うちＩＴ関連職</option>
<option value="202102_000844169_うちＩＴ関連職業.csv">2021年02月 うちＩＴ関連職</option>
<option value="202103_000862002_うちＩＴ関連職業.csv">2021年03月 うちＩＴ関連職</option>
<option value="202104_000880611_うちＩＴ関連職業.csv">2021年04月 うちＩＴ関連職</option>
<option value="202105_000905235_うちＩＴ関連職業.csv">2021年05月 うちＩＴ関連職</option>
<option value="202106_000928183_うちＩＴ関連職業.csv">2021年06月 うちＩＴ関連職</option>
<option value="202107_000952417_うちＩＴ関連職業.csv">2021年07月 うちＩＴ関連職</option>
<option value="202108_000977250_うちＩＴ関連職業.csv">2021年08月 うちＩＴ関連職</option>
<option value="202109_000999233_うちＩＴ関連職業.csv">2021年09月 うちＩＴ関連職</option>
<option value="202110_001023796_うちＩＴ関連職業.csv">2021年10月 うちＩＴ関連職</option>
<option value="202111_001048584_うちＩＴ関連職業.csv">2021年11月 うちＩＴ関連職</option>
<option value="202112_001075381_うちＩＴ関連職業.csv">2021年12月 うちＩＴ関連職</option>
<option value="202201_001102759_うちＩＴ関連職業.csv">2022年01月 うちＩＴ関連職</option>
<option value="202202_001120375_うちＩＴ関連職業.csv">2022年02月 うちＩＴ関連職</option>
<option value="202203_001139041_うちＩＴ関連職業.csv">2022年03月 うちＩＴ関連職</option>
<option value="202204_001162568_うちＩＴ関連職業.csv">2022年04月 うちＩＴ関連職</option>
<option value="202205_001188058_うちＩＴ関連職業.csv">2022年05月 うちＩＴ関連職</option>
<option value="202206_001209322_うちＩＴ関連職業.csv">2022年06月 うちＩＴ関連職</option>
<option value="202207_001233778_うちＩＴ関連職業.csv">2022年07月 うちＩＴ関連職</option>
<option value="202208_001260287_うちＩＴ関連職業.csv">2022年08月 うちＩＴ関連職</option>
<option value="202209_001284855_うちＩＴ関連職業.csv">2022年09月 うちＩＴ関連職</option>
<option value="202210_001312912_うちＩＴ関連職業.csv">2022年10月 うちＩＴ関連職</option>
<option value="202211_001338172_うちＩＴ関連職業.csv">2022年11月 うちＩＴ関連職</option>
<option value="202212_001367794_うちＩＴ関連職業.csv" selected>2022年12月 うちＩＴ関連職</option>
</select>
<!--
<button id="load-csv-button">Load CSV</button>
-->
</div>
<a href="https://wordpress.kazunoriri.com/https-kazunoriri-com-wordpress-chart-js-bar-csv/" target="_blank">WordPress | CSVを読み込んでChart.jsの棒>グラフを描画する方法</a>
<br />
<br />
<a href="https://qiita.com/saka212/items/5714fa68deb44a185ec3">Chart.jsでグラフを更新するサンプル（ボタンをクリック）</a>
<!--
キャラ,HP,MP,ちから,すばやさ
ヨシヒコ,330,200,150,90
アリーナ,300,0,200,220
マーニャ,230,300,40,130j
ミネア,240,170,80,80
koumoku,YEARMM,JOBB,求人数,求職者数,求人倍率,一般求人数,一般求職者数,一般求人倍率,パート求人数,パート求職者数,パート求人倍率
秋田労働局,202212,うちＩＴ関連職業,497,433,1.15,435,357,1.22,62,76,0.82
秋田,202212,うちＩＴ関連職業,172,175,0.98,153,138,1.11,19,37,0.51
男鹿,202212,うちＩＴ関連職業,7,9,0.78,2,6,0.33,5,3,1.67
能代,202212,うちＩＴ関連職業,49,17,2.88,49,15,3.27,0,2,0
大館,202212,うちＩＴ関連職業,46,20,2.30,43,14,3.07,3,6,0.50
鷹巣,202212,うちＩＴ関連職業,6,9,0.67,6,8,0.75,0,1,0
大曲,202212,うちＩＴ関連職業,41,23,1.78,33,18,1.83,8,5,1.60
角館,202212,うちＩＴ関連職業,9,9,1.00,5,8,0.63,4,1,4.00
本荘,202212,うちＩＴ関連職業,60,107,0.56,55,101,0.54,5,6,0.83
横手,202212,うちＩＴ関連職業,57,24,2.38,39,17,2.29,18,7,2.57
湯沢,202212,うちＩＴ関連職業,30,31,0.97,30,25,1.20,0,6,0
鹿角,202212,うちＩＴ関連職業,20,9,2.22,20,7,2.86,0,2,0
-->
<script>
// window.onload = function() {
// window.onload = loadCsv('sample2.csv');
window.onload = loadCsv('sample3.csv');
// document.addEventListener("DOMContentLoaded", function() {
// // ここに実行したい関数のコードを記述する
// console.log("This function will run only once when the HTML page is loaded.");
// loadCsv('sample2.csv');
// });
//@ // csv-selectまたはchartTitle2が変更された場合に、グラフのタイトルを更新する
//@ document.getElementById("csv-select").addEventListener("select", () => {
//@ console.log("Im title1");
//@ myChart.options.plugins.title.text = document.getElementById("csv-select").value;
//@ myChart.update();
//@ });
//@
//@ document.getElementById("csv-select2").addEventListener("select", () => {
//@ myChart.options.plugins.title.text = document.getElementById("csv-select2").value;
//@ myChart.update();
//@ });
function myFunction() {
const selectedValue = document.getElementById('csv-select').value;
if(myChart) {
myChart.destroy();
}
loadCsv(selectedValue);
//@ csv-selectまたはchartTitle2が変更された場合に、グラフのタイトルを更新する
// グラフのタイトル更新
// myChart.options.plugins.title.text = document.getElementById("csv-select").value;
// myChart.options.plugins.title.text = selectedValue;
// myChart.update();
//- // うちＩＴ関連職が選択された時は、看護師保健師はグレーアウトしたい
//- let drop1 = document.getElementById("csv-select");
//- let drop2 = document.getElementById("csv-select2");
//- if (drop1.value == "1"){
//- drop2.disabled = true;
//- } else {
//- drop2.disabled = false;
//- }
}
function myFunction2() {
const selectedValue2 = document.getElementById('csv-select2').value;
if(myChart) {
myChart.destroy();
}
loadCsv(selectedValue2);
// myChart.options.plugins.title.text = document.getElementById("csv-select2").value;
// myChart.options.plugins.title.text = selectedValue2;
// myChart.update();
}
function loadCsv(CSVV) {
// let キャラ = ;
// let HPのデータ = ;
// let MPのデータ = ;
// let ちからのデータ = ;
// let すばやさのデータ = ;
let col_koumoku = ;
let col_YEARMM = ;
let col_JOBB = ;
let col_KYUJINSU = ;
let col_KYUSYOKU = ;
let col_KYUJINRITU = ;
let col_I_KYUJINSU = ;
let col_I_KYUSYOKU = ;
let col_I_KYUJINRITU = ;
let col_P_KYUJINSU = ;
let col_P_KYUSYOKU = ;
let col_P_KYUJINRITU = ;
// let csvPath = './sample1.csv'
// let csvPath = './sample2.csv';
let csvPath = CSVV;
// リクエストreqの定義 オブジェクトの本体req
let req = new XMLHttpRequest();
req.open('get', csvPath, true); // 1
req.send(null);
req.onload = function() { // 2
makeGraphData();
drawGraph();
function makeGraphData() {
// まずは改行で分ける
let reqArray = req.responseText.split('\n'); // 3
// reqArrayには
// ヘッダデータ
// 秋田,202212,うちＩＴ関連職業,172,175,0.98,153,138,1.11,19,37,0.51
// 男鹿,202212,うちＩＴ関連職業,7,9,0.78,2,6,0.33,5,3,1.67
// ...
// 末尾まで が全部格納される
reqArray.forEach((element) => { // 4
// ROWW_DATA 行データ
let ROWW_DATA = element.split(',')
let indexYEARMM = reqArray[0].split(',').indexOf('YEARMM');
let indexJOBB = reqArray[0].split(',').indexOf('JOBB');
let indexKYUJINSU = reqArray[0].split(',').indexOf('求人数');
let indexKYUSYOKU = reqArray[0].split(',').indexOf('求職者数');
let indexKYUJINRITU = reqArray[0].split(',').indexOf('求人倍率');
let indexKYUJINSU_I = reqArray[0].split(',').indexOf('一般求人数');
let indexKYUSYOKU_I = reqArray[0].split(',').indexOf('一般求職者数');
let indexKYUJINRITU_I = reqArray[0].split(',').indexOf('一般求人倍率');
let indexKYUJINSU_P = reqArray[0].split(',').indexOf('パート求人数');
let indexKYUSYOKU_P = reqArray[0].split(',').indexOf('パート求職者数');
let indexKYUJINRITU_P = reqArray[0].split(',').indexOf('パート求人倍率');
//配列にpushして突っ込んでる？
//キャラ.push(ROWW_DATA[0]);
col_koumoku.push(ROWW_DATA[0]);
if(ROWW_DATA[indexKYUJINSU] !== undefined) {
col_KYUJINSU.push(Number(ROWW_DATA[indexKYUJINSU]));
};
if(ROWW_DATA[indexKYUSYOKU] !== undefined) {
col_KYUSYOKU.push(Number(ROWW_DATA[indexKYUSYOKU]));
};
if(ROWW_DATA[indexKYUJINRITU] !== undefined) {
col_KYUJINRITU.push(Number(ROWW_DATA[indexKYUJINRITU]));
};
});
removeHeader()
function removeHeader() {
col_koumoku.shift();
col_KYUJINSU.shift();
col_KYUSYOKU.shift();
col_KYUJINRITU.shift();
// キャラ.shift();
// HPのデータ.shift();
// MPのデータ.shift();
// ちからのデータ.shift();
// すばやさのデータ.shift();
};
};
function drawGraph() {
let ctx = document.getElementById('canvas').getContext('2d');
// let グラフ = new Chart(ctx, {
// myGraph
// var myG = new Chart(ctx, {
// optionsドロップダウン選択時にmyChart.destroy必須
window.myChart = new Chart(ctx, {
type: 'bar', // ここはbarのままにする2軸でも
data: G_DATA,
options: G_OPTION2,
plugins: [
ChartDataLabels,
],
// data: グラフのデータ,
// options: グラフのオプション
// options: G_OPTION
});
};
};
// var グラフのデータ = {
var G_DATA = {
// labels: キャラ,
// ↓このlabelsでX軸の単位（秋田,男鹿,能代...）が描画される
labels: col_koumoku,
datasets: [
// {
// //label: 'HP',
// label: 'col_koumoku',
// // data: HPのデータ,
// data: col_koumoku,
// borderColor : "rgba(55,155,255,0.7)",
// backgroundColor : "rgba(55,155,255,0.5)",
// },
{
type: 'bar',
label: '求人数',
// label: 'col_KYUJINSU',
data: col_KYUJINSU,
borderColor : "rgba(0,0,255,0.7)",
backgroundColor : "rgba(0,0,255,0.5)",
// borderColor : "rgba(255,100,133,0.7)",
// backgroundColor : "rgba(255,100,133,0.5)",
// 左軸に表示
yAxisID: "y1",
// yAxisID: "y-axis-1",
// https://hotay-blog.com/codeigniter4-chartjs3x/
// yAxisIDとyAxesIDの記述は、yAxisIDが正しい
// yAxesIDだと、棒グラフの方が正しく表示されない
},
{
type: 'bar',
label: '求職者数',
data: col_KYUSYOKU,
borderColor : "rgba(255,0,0,0.7)",
backgroundColor : "rgba(255,0,0,0.5)",
// borderColor : "rgba(55,255,55,0.7)",
// backgroundColor : "rgba(55,255,55,0.5)",
yAxisID: "y1",
},
{
type: 'line',
label: '求人倍率(右軸)',
data: col_KYUJINRITU,
borderColor : "rgba(0,0,255,0.3)",
// borderColor : "rgba(255,222,133,0.7)",
//backgroundColor : "rgba(255,222,133,0.3)",
backgroundColor : "rgba(0,0,255,0.3)",
tension: 0, //0なら直線、0.1以上は曲線
fill: false, //直線からX軸までの範囲を塗りつぶすならtrue
// 右軸に表示
yAxisID: "y2",
// pointRadius: 5,
// pointHoverRadius: 7,
// pointBackgroundColor: 'white',
// pointBorderColor: 'rgb(75, 192, 192)',
// pointHoverBackgroundColor: 'rgb(75, 192, 192)',
// pointHoverBorderColor: 'white',
},
],
};
// const G_OPTION2 = {
// Chart.jsのVer2→3でyAxesの書き方が大きく変わった
var G_OPTION2 = {
responsive: true,
plugins: {
title:{
display: true,
// text: '職業別求人・求職バランスシート',
text: '職業別求人・求職バランスシート ' + CSVV,
},
datalabels: {
font: {
size: 20
},
formatter: function( value, context ){
return value.toString();
}
}
//- labels: {
//- display: true
//- },
//- datalabels: {
//- anchor: 'end',
//- align: 'top',
//- font: {
//- weight: 'bold'
//- },
//- // formatter: function(value) {
//- // return value;
//- // }
//- formatter: function(value, context) {
//- // return context.chart.data.labels[context.dataIndex];
//- return value;
//- },
//- },
// tooltips: {
// callbacks: {
// title: function (tooltipItem, data){
// return tooltipItem[0].label;
// },
// label: function (tooltipItem, data){
// return tooltipItem.value;
// }
// }
// },
},
// Chart.js ver3 での書き方
// http://www.kogures.com/hitoshi/javascript/chartjs/scale.html
// https://blog.myntinc.com/2021/03/chartjs-ver3x.html
scales: {
y1: {
type: "linear",
position: "left",
display: true,
beginAtZero: true,
// suggestedつけると認識されないChart.js_Ver3
// suggestedMin: 0,
// suggestedMax: 300,
min: 0,
max: 400,
stepSize: 100,
scaleLabel: {
display:true,
labelString:"人数",
},
grid: {
drawOnChartArea: false,
},
// id: "y-axis-1",
ticks: {
callback: function(value){
return value+'人';
},
// suggestedMax: "300",
// suggestedMin: "0",
// stepSize: 100,
//beginAtZero: true,
// max: 150,
// max: 300,
// min: 0,
},
// scaleLabel: {
// display: true,
// // labelString: 'あたい'
// labelString: '人数'
// }
},
y2: {
type: "linear",
position: "right",
display: true,
beginAtZero: true,
min: 0,
max: 4,
stepSize: 1,
// id: "y-axis-1",
ticks: {
callback: function(value){
return value+'％';
},
// max: "4",
// min: "0",
// stepSize: 1,
//beginAtZero: true,
// max: 150,
// max: 300,
// min: 0,
},
// scaleLabel: {
// display: true,
// labelString: '有効求人倍率'
// },
grid: {
drawOnChartArea: true,
},
},
// y2:{
// // 右軸
// id: "y-axis-2",
// // type: "linear",
// // 右を指定
// position: "right",
// // 目盛り
// ticks: {
// beginAtZero: true,
// max: 4,
// min: 0,
// stepsize: 1
// },
// // Y軸の目盛り（軸ラベル）
// scaleLabel: {
// display: true,
// // labelString: 'あたい'
// labelString: '有効求人倍率'
// },
// gridLines: {
// display: false
// },
// } // y -----
}
};
};
//# <hr>
//# <select id="csv-file-list">
//# <option value="">-- CSVファイルを選択してください --</option>
//# </select>
//#
//# <p id="selected-csv-file"></p>
//# // そもそもjavascriptでサーバ側にあるファイルの一覧を取得することはできない！
//# document.addEventListener("DOMContentLoaded", function() {
//# // document.addEventListener("DOMContentLoaded", function() {
//# // console.log("Im here");
//# // const fileList = ;
//# // const xhr = new XMLHttpRequest();
//# // xhr.open('GET', '.');
//# // xhr.responseType = 'document';
//# // xhr.onload = () => {
//# // const files = xhr.response.querySelectorAll('a');
//# // for (let i = 0; i < files.length; i++) {
//# // const fileName = files[i].getAttribute('href');
//# // if(/\.csv$/i.test(fileName)) {
//# // console.log(fileName);
//# // fileList.push(fileName);
//# // }
//# // }
//# // }
//# // // プルダウンに選択肢を追加する
//# // const select = document.getElementById('csv-file-list');
//# // for (let i = 0; i < fileList.length; i++) {
//# // const option = document.createElement('option');
//# // option.value = fileList[i];
//# // option.text = fileList[i];
//# // select.add(option);
//# // }
//# // // プルダウンで選択されたファイルを表示する
//# // select.addEventListener('change', (event) => {
//# // const fileName = event.target.value;
//# // document.getElementById('selected-csv-file').textContent = fileName;
//# // });
//#
//#
//# // XMLHttpRequest object
//# var xhr = new XMLHttpRequest();
//# // 同じ階層にあるCSVファイルの一覧を取得する
//# xhr.open("GET", "./", true);
//# xhr.onreadystatechange = function() {
//# console.log("Im here");
//# if (xhr.readyState === 4 && xhr.status === 200) {
//# // CSVファイル一覧を取得してプルダウンに追加する
//# var fileList = xhr.responseText.split("\n");
//# for (var i = 0; i < fileList.length; i++) {
//# // myREGX = /.*csv$/g;
//# myREGX = /.*csv$/i;
//# //if (fileList[i].match(/\.csv$/)) {
//# if (fileList[i].match(myREGX)) {
//# var option = document.createElement("option");
//# option.text = fileList[i];
//# option.value = fileList[i];
//# document.getElementById("csv-file-list").appendChild(option);
//# }
//# }
//# }
//# };
//# xhr.send();
//#
//# // プルダウンで選択されたファイル名を表示する
//# document.getElementById("csv-file-list").addEventListener("change", function() {
//# var selectedFile = this.value;
//# document.getElementById("selected-csv-file").textContent = "選択されたファイル: " + selectedFile;
//# });
//# });
//#
//#
//# //const list_csvv = [];
//# ////for (let i = 1; i<=12; i++){
//# //for (let j = 2019; j<=2022; j++) {
//# // for (let i = 1; i<=12; i++){
//# // console.log(i);
//# // if(i < 10 ) {
//# // const filename1 = `myKINRIROUKI03_24うちＩＴ関連職業_00全体_${j}0${i}.csv`;
//# // list_csvv.push(filename1);
//# // } else {
//# // const filename1 = `myKINRIROUKI03_24うちＩＴ関連職業_00全体_${j}${i}.csv`;
//# // list_csvv.push(filename1);
//# // }
//# // }
//# //}
//#
//#
//#
//#
//# const csvSelect = document.getElementById("csv-select");
//# // const loadCsvButton = document.getElementById("load-csv-button");
//# // const chartCanvas = document.getElementById("chart");
//# let chart = null;
//#
//# // loadCsvButton.addEventListener("click", () => {
//# // const selectedCsv = csvSelect.value;
//# // console.log(selectedCsv);
//# // loadCsv(selectedCsv);
//# // });
</script>
</HEAD>
</div>
<br><br>
</center>
</BODY>
</HTML>
