{"id":138,"date":"2025-10-14T16:38:38","date_gmt":"2025-10-14T07:38:38","guid":{"rendered":"http:\/\/www.yell-inc.com\/?page_id=138"},"modified":"2026-01-22T16:33:22","modified_gmt":"2026-01-22T07:33:22","slug":"data-in-yell","status":"publish","type":"page","link":"https:\/\/www.yell-inc.com\/?page_id=138","title":{"rendered":"\u6570\u5b57\u3067\u898b\u308b\u30a8\u30fc\u30eb"},"content":{"rendered":"<section>\r\n\n\n<style>\nh3{\n\tmargin:0;\n}\n.chunk_wrap{\n\t\/* margin-bottom:50px; *\/\n  margin-top: -36px;\n  margin-bottom: 0;\n  display: flex;\n  justify-content: space-between;\n}\n.line3{\n\twidth:32%;\n  \/* margin-bottom: 20px; *\/\n}\n.canvas_wrap{\n  display: block;\n\tvertical-align: top;\n  \/* padding:10px; *\/\n  margin:10px;\n  \/* width:570px;\n  height:427px; *\/\n  width: 49%;\n  aspect-ratio: 570 \/ 427;\n}\n\n.canvas_wrap canvas{\n\tbackground-color: #fff;\n\twidth:100%!important;\n  height:auto!important;\n  display:block;\n  aspect-ratio: 526 \/ 427!important;\n}\n.line3 canvas{\n  aspect-ratio: 341 \/ 427!important;\n}\n\n.canvas_wrap img{\n\tbackground-color: #fff;\n  width:100%!important;\n  height: auto;\n  object-fit: contain;\n}\n\n.chart_h{\n\tbackground: #222;\n    color: #fff;\n    font-size: 16px;\n    font-weight:bold;\n    text-align: center;\n    padding: 10px;\n    position: relative;\n    top: 36px;\n}\n\n.container-scale-wrap {\n  transform-origin: 0 0;\n  \/* width: 1070px;  *\/\n  width: 1500px;\n  margin: 0 auto;\n}\n\n\n\/* --- \u4fee\u6b63\u7b87\u6240 --- *\/\n.canvas_wrap canvas {\n  background-color: #fff;\n  width: 100% !important;\n  height: auto !important;\n  display: block;\n  \/* aspect-ratio: 526 \/ 427!important;  \u2190 \u3053\u308c\u3092\u524a\u9664\u3001\u307e\u305f\u306f\u5186\u30b0\u30e9\u30d5\u4ee5\u5916\u306e\u307f\u306b\u9069\u7528 *\/\n}\n\n.line3 canvas {\n  aspect-ratio: auto !important; \n  min-height: 400px;\n  \/* padding: 43px 0px 42px; *\/\n  padding: 60px 0 60px;\n}\n.vsp{\n  display:none;\n}\n.vpc{\n  display:block;\n}\n\n@media screen and (max-width: 768px){\n  .chunk_wrap{\n    display: block;\n    margin:0;\n  }\n  .canvas_wrap{\n    width:100%;\n    padding:0;\n    margin:0;\n    height: auto;\n  }\n  .canvas_wrap canvas{\n    aspect-ratio: 526 \/ 526!important;\n  }\n  .line3{\n    width:100%;\n\n  }\n  .line3 canvas {\n    aspect-ratio: auto !important; \n    min-height: 400px;\n    \/* padding: 43px 0px 42px; *\/\n    padding: 60px 0 60px;\n  }\n  .container-scale-wrap {\n    width: 100%; \/* \u30b9\u30de\u30db\u3067\u306f\u56fa\u5b9a\u3092\u89e3\u9664 *\/\n    transform: none !important; \/* \u30b9\u30b1\u30fc\u30eb\u3092\u7121\u52b9\u5316 *\/\n    height: auto !important; \/* \u9ad8\u3055\u56fa\u5b9a\u3092\u89e3\u9664 *\/\n  }\n  .vsp{\n    display:block;\n  }\n  .vpc{\n    display:none;\n  }\n}\n\n<\/style>\n\n<div class=\"container\">\n<div id=\"scaleContainer\" class=\"container-scale-wrap\">\n\t<div class=\"chunk_wrap\">\n\t\t<div class=\"canvas_wrap vpc\">\n\t\t\t<span class=\"chart_h\">\u58f2\u4e0a\u63a8\u79fb<\/span>\n\t\t\t<canvas id=\"salesChart\"><\/canvas>\n\t\t<\/div>\n    <div class=\"canvas_wrap vsp\">\n\t\t\t<span class=\"chart_h\">\u58f2\u4e0a\u63a8\u79fb<\/span>\n\t\t\t<canvas id=\"salesChart_SP\"><\/canvas>\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap vpc\">\n\t\t\t<span class=\"chart_h\">\u5f93\u696d\u54e1\u63a8\u79fb<\/span>\n\t\t\t<canvas id=\"lineChart\"><\/canvas>\n\t\t<\/div>\n    <div class=\"canvas_wrap vsp\">\n\t\t\t<span class=\"chart_h\">\u5f93\u696d\u54e1\u63a8\u79fb<\/span>\n\t\t\t<canvas id=\"lineChart_SP\"><\/canvas>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"chunk_wrap\">\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u7537\u5973\u6bd4<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph03.jpg\">\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3 vpc\">\n\t\t\t<span class=\"chart_h\">\u5e74\u9f62\u69cb\u6210\u6bd4<\/span>\n\t\t\t<canvas id=\"pieChart\"><\/canvas>\n\t\t<\/div>\n    <div class=\"canvas_wrap line3 vsp\">\n\t\t\t<span class=\"chart_h\">\u5e74\u9f62\u69cb\u6210\u6bd4<\/span>\n\t\t\t<canvas id=\"pieChart_SP\"><\/canvas>\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u5e73\u5747\u6709\u7d66\u6d88\u5316\u7387<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph05.jpg\">\n\t\t<\/div>\n\t<\/div>\n\n  <div class=\"chunk_wrap\">\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u7a3c\u50cd\u7387<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph10.jpg\">\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u7537\u6027\u80b2\u4f11\u53d6\u5f97\u7387<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph11.jpg\">\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u6b8b\u696d\u6642\u9593\u5e73\u5747<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph12.jpg\">\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"chunk_wrap\">\n\t\t<div class=\"canvas_wrap vpc\">\n\t\t\t<span class=\"chart_h\">\u5f53\u793e\u3078\u306e\u5fdc\u52df\u52d5\u6a5f\uff08\u8907\u6570\u56de\u7b54\u3042\u308a\uff09<\/span>\n\t\t\t<canvas id=\"horizontalBarChart\"><\/canvas>\n\t\t<\/div>\n\t\t<div class=\"canvas_wrap vsp\">\n\t\t\t<span class=\"chart_h\">\u5f53\u793e\u3078\u306e\u5fdc\u52df\u52d5\u6a5f\uff08\u8907\u6570\u56de\u7b54\u3042\u308a\uff09<\/span>\n\t\t\t<canvas id=\"horizontalBarChart_SP\"><\/canvas>\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap\">\n\t\t\t<span class=\"chart_h\">\u524d\u8077\u6bd4\u7387<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph07.jpg\">\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"chunk_wrap\">\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u8077\u7a2e\u6bd4\u7387<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph08.jpg\">\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3\">\n\t\t\t<span class=\"chart_h\">\u5de5\u4e8b\u7a2e\u5225<\/span>\n\t\t\t<img decoding=\"async\" src=\"\/wp-content\/themes\/original\/images\/data_graph09.jpg\">\n\t\t<\/div>\n\n\t\t<div class=\"canvas_wrap line3 vpc\">\n\t\t\t<span class=\"chart_h\">\u7269\u4ef6\u6bd4\u7387<\/span>\n\t\t\t<canvas id=\"pieB_Chart\"><\/canvas>\n\t\t<\/div>\n    <div class=\"canvas_wrap line3 vsp\">\n\t\t\t<span class=\"chart_h\">\u7269\u4ef6\u6bd4\u7387<\/span>\n\t\t\t<canvas id=\"pieB_Chart_SP\"><\/canvas>\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n<\/div>\n<!-- \u7e26\u68d2\u30b0\u30e9\u30d5 -->\n<script>\n{\nlet ctx_b = document.getElementById('salesChart');\nlet year_sales_x = '2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025'.split(',').map(String);\nlet year_sales = '0.45, 3.81, 5.36, 6.06, 7.18, 9.07, 11.91, 14.74, 17.3, 24.7, 31.5, 42.6'.split(',');\nlet year_color = '#9d947b';\n\nnew Chart(ctx_b, {\n  type: 'bar',\n  data: {\n\tlabels: year_sales_x,\n    datasets: [{\n      label: '\u5e74\u9593\u58f2\u4e0a\uff08\u5104\u5186\uff09',\n\t  data: year_sales,\n      backgroundColor: year_color,\n      borderRadius: 0,\n      barPercentage: 1, \/\/ \u68d2\u306e\u592a\u3055\uff080\u301c1\uff09\n      categoryPercentage: 0.8, \/\/ \u68d2\u3068\u68d2\u306e\u9593\u9694\n\n    }]\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    layout: {\n      padding: { top: 60, bottom: 20, left: 10, right: 10 }\n    },\n    scales: {\n      x: {\n\t\t  type: 'category',\n        grid: {\n          display: false,\n        },\n        ticks: {\n          font: {\n            size: 20,\n            family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n          },\n          color: '#333',\n          padding: 8,\n          maxRotation: 45,\n          minRotation: 45,\n          callback: function(value, index, ticks) {\n          let label = this.getLabelForValue(index);\n          if (typeof label === 'string' && label.includes('\u4e88\u6e2c')) {\n            return label.replace('\u4e88\u6e2c', '');\n          }\n          return label;\n          }\n        }\n      },\n      y: {\n        beginAtZero: true,\n        ticks: {\n          stepSize: 10,\n          font: {\n            size: 20,\n            \/\/ weight: 'bold',\n            family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n          },\n          color: '#333',\n          callback: function(value) {\n            return value + '\u5104';\n          }\n        },\n        grid: {\n          color: '#ddd',\n          lineWidth: 1\n        }\n      }\n    },\n    plugins: {\n      legend: {\n        display: false \/\/ \u4e0a\u90e8\u30e9\u30d9\u30eb\u3092\u975e\u8868\u793a\n      },\n      tooltip: {\n        backgroundColor: '#333',\n        titleFont: { size: 14 },\n        bodyFont: { size: 14 },\n        callbacks: {\n          label: (context) => context.formattedValue.trim() + ' \u5104\u5186'\n        }\n      },\n      datalabels: {\n        anchor: 'end',\n        align: 'top',\n        color: year_color,\n        font: {\n          size: 14,\n          weight: 'bold',\n          family: \"'Noto Sans JP', sans-serif\"\n        },\n        formatter: (value) => {\n          if (value < 1) {\n            return Math.round(value * 10000) + '\u4e07';\n          }\n          let oku = Math.floor(value);\n          let man = Math.round((value - oku) * 10000);\n          return man ? oku + '\u5104\\n' + man + '\u4e07' : oku + '\u5104';\n        }\n      }\n    },\n    animation: {\n      duration: 1500,\n      easing: 'easeOutQuart'\n    }\n  },\n  plugins: [\n  ChartDataLabels,\n  {\n    id: 'customPredictionLabel',\n    afterDraw(chart) {\n      let ctx = chart.ctx;\n      let xAxis = chart.scales.x;\n\n\t\t\/\/ X\u8ef8\u30e9\u30d9\u30eb\u914d\u5217\n\t  let labels = chart.data.labels;\n      let lastLabel = labels[labels.length - 1];\n\n      if (!lastLabel.includes('\u4e88\u6e2c')) {\n        return;\n      }\n\n      let lastIndex = xAxis.ticks.length - 1;\n      let x = xAxis.getPixelForTick(lastIndex);\n      let y = xAxis.bottom + 5;\n\n      ctx.save();\n      ctx.font = '12px \"Noto Sans JP\"';\n      ctx.fillStyle = '#333';\n      ctx.textAlign = 'center';\n      ctx.fillText('(\u4e88\u6e2c)', x, y);\n      ctx.restore();\n    }\n  }\n]\n});\n}\n<\/script>\n\n\n<!-- \u6298\u308c\u7dda\u30b0\u30e9\u30d5 -->\n<script>\n{\n    \/\/ let linemax = 600;\n\t  let linelabels = '2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,2025'.split(',');\n    let linedata   = '18, 54, 67, 72, 82, 127, 155, 208, 270, 368, 508, 695'.split(',');\n    let linedata_color   = '#9d947b';\n\n    let lineCtx = document.getElementById(\"lineChart\");\n    let lineConfig = {\n    type: 'line',\n    data: {\n        labels: linelabels,\n        datasets: [{\n        data: linedata,\n        borderColor: linedata_color,\n        backgroundColor: linedata_color,\n        pointRadius: 7,       \/\/ \u70b9\u306e\u30b5\u30a4\u30ba\n        pointBackgroundColor: linedata_color\n        }],\n    },\n    options: {\n\t\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\t\tmaintainAspectRatio: false,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n\t\tlayout: {\n\t\t  padding: { top: 60, bottom: 20, left: 10, right: 15 }\n\t\t},\n        scales: {\n          x: {\n              grid: {\n                display: false,\n              },\n              ticks: {\n                font: {\n                  size: 20,\n                  family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n                },\n                color: '#333',\n                padding: 8,\n                maxRotation: 45,\n                minRotation: 45,\n                callback: function(value, index, ticks) {\n                let label = this.getLabelForValue(index);\n                if (typeof label === 'string' && label.includes('\u4e88\u6e2c')) {\n                  return label.replace('\u4e88\u6e2c', '');\n                }\n                return label;\n                }\n              }\n            },\n            y: {\n                suggestedMin: 0,\n                \/\/ suggestedMax: linemax,\n                ticks: {\n                  stepSize: 100,\n                  font: {\n                    size: 20\n                  },\n                  callback: function(value) {\n                    return value + '\u4eba';\n                  },\n                },\n            }\n        },\n        plugins: {\n            legend: { display: false },\n            datalabels: {\n                anchor: 'end',   \/\/ \u30c7\u30fc\u30bf\u30dd\u30a4\u30f3\u30c8\u306e\u4e0a\u306b\u914d\u7f6e\n                align: 'top',\n                color: linedata_color,\n                font: { \n                  size: 20,\n                  weight: 'bold'\n                 },\n                offset: 15,\n                formatter: (value) => value.trim()\n                \/\/ formatter: (value) => {\n                \/\/   return `${value}\u4eba`;\n                \/\/ },\n            }\n        },\n    },\n    plugins: [ChartDataLabels]\n    };\n    let lineChart = new Chart(lineCtx, lineConfig, {\n        plugins: [{\n            afterDraw(chart, args, options) {\n                let { ctx, chartArea: { top, right , bottom, left, width, height } } = chart;\n                ctx.save();\n    \n                \/\/ ctx.textAlign = 'left';\n                \/\/ ctx.font = 'bold 16px Noto Sans JP';\n                \/\/ ctx.fillStyle = '#3C435C';\n                \/\/ ctx.fillText('\uff08\u4e07\u5186\uff09', chart['chartArea']['right'] - 32, chart['chartArea']['bottom'] + 40);\n            },\n        },\n      ]\n    });\n}\n<\/script>\n\n\n\n<!-- \u5186\u30b0\u30e9\u30d5 -->\n<script>\n{\nlet ctx_p = document.getElementById('pieChart');\n\nlet gen_label = '20\u4ee3, 30\u4ee3, 40\u4ee3, 50\u4ee3, 60\u4ee3\u4ee5\u4e0a'.split(',');\nlet gen_data = '66, 23, 6, 3, 2'.split(',');\nlet gen_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\nlet externalLabelSettings = [\n  { index: 2, fontSize: 22, color: gen_color[2], offset: 80, lineAngle: -0.8 },\n  { index: 3, fontSize: 22, color: gen_color[3], offset: 50, lineAngle: 0 },\n  { index: 4, fontSize: 22, color: gen_color[4], offset: 40, lineAngle: 1.3 }\n];\n\nnew Chart(ctx_p, {\n  type: 'pie',\n  data: {\n    labels: gen_label,\n    datasets: [{\n      label: '\u58f2\u4e0a\u69cb\u6210\u6bd4',\n      data: gen_data,\n      backgroundColor: gen_color,\n      borderColor: '#fff',\n      borderWidth: 2\n    }]\n  },\n  options: {\n\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\tmaintainAspectRatio: true,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    \/\/ layout: {\n    \/\/   padding: {\n    \/\/     top: 100,\n    \/\/     bottom: 40,\n    \/\/     left: 20,\n    \/\/     right: 20\n    \/\/   }\n    \/\/ },\n    layout: {\n      padding: {\n        top: 60,    \/\/ 100\u304b\u3089\u5c11\u3057\u6e1b\u3089\u3057\u3066\u8abf\u6574\n        bottom: 40,\n        left: 10,\n        right: 10\n      }\n    },\n    plugins: {\n      legend: {\n        display: false,\n      },\n      title: {\n        display: false,\n      },\n      datalabels: {\n        color: '#fff',\n        font: function(context) {\n            let sizeList = [60, 30, 0, 0, 0]; \/\/ \u30c7\u30fc\u30bf\u3054\u3068\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\n            return {\n              size: sizeList[context.dataIndex] || 12,\n              weight: 'bold'\n            };\n          },\n          formatter: (value, context) => {\n            let total = context.chart._metasets[0].total;\n            let percent = Math.round((value \/ total) * 100);\n            return percent >= 10\n              ? `${context.chart.data.labels[context.dataIndex].trim()}\\n${percent}%`\n              : '';\n          }\n      },\n      tooltip: {\n        callbacks: {\n          label: function(context) {\n            let label = context.label || '';\n            let value = context.parsed;\n            let total = context.chart._metasets[0].total;\n            let percent = ((value \/ total) * 100).toFixed(1);\n            return `${label}: ${value} (${percent}%)`;\n          }\n        }\n      }\n    },\n    animation: {\n      animateScale: true,\n      animateRotate: true\n    }\n  },\n  plugins: [ChartDataLabels, {\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u7dda\u30e9\u30d9\u30eb\u63cf\u753b\uff08\u5c0f\u3055\u3044\u30bb\u30b0\u30e1\u30f3\u30c8\u7528\uff09\n    afterDraw: (chart) => {\n      let ctx = chart.ctx;\n      let dataset = chart.data.datasets[0];\n      let meta = chart.getDatasetMeta(0);\n      let centerX = meta.data[0].x;\n      let centerY = meta.data[0].y;\n      ctx.save();\n\n      externalLabelSettings.forEach(setting => {\n        let element = meta.data[setting.index];\n        let value = dataset.data[setting.index];\n        let angle = (element.startAngle + element.endAngle) \/ 2;\n\n        \/\/ \u7dda\u306e\u30b9\u30bf\u30fc\u30c8\n        let xStart = centerX + Math.cos(angle) * element.outerRadius;\n        let yStart = centerY + Math.sin(angle) * element.outerRadius;\n\n        \/\/ \u30e9\u30d9\u30eb\u4f4d\u7f6e\u3092\u30ab\u30b9\u30bf\u30e0\n        let xText = xStart + Math.cos(angle + setting.lineAngle) * setting.offset;\n        let yText = yStart + Math.sin(angle + setting.lineAngle) * setting.offset;\n\n        \/\/ \u7dda\u3092\u63cf\u753b\uff08\u9014\u4e2d\u3067\u6298\u308c\u7dda\u306b\u3059\u308b\u5834\u5408\u3082\u53ef\u80fd\uff09\n        ctx.beginPath();\n        ctx.moveTo(xStart, yStart);\n        \/\/ \u7dda\u306e\u9014\u4e2d\u3092\u5c11\u3057\u6c34\u5e73\u306b\u6298\u308b\u4f8b\n        let xMid = xStart + (xText - xStart) * 0.5;\n        ctx.lineTo(xMid, yText);\n        ctx.lineTo(xText, yText);\n        ctx.strokeStyle = setting.color;\n        ctx.lineWidth = 1;\n        ctx.stroke();\n\n        \/\/ \u30e9\u30d9\u30eb\u3092\u63cf\u753b\n        \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\u3092\u6e2c\u308b\n        let textMetrics = ctx.measureText(chart.data.labels[setting.index]);\n        let textWidth = textMetrics.width;\n        let textHeight = 14; \/\/ \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\n        ctx.fillStyle = '#fff'; \/\/ \u4f8b: \u80cc\u666f\u304c\u767d\u306e\u5834\u5408\n        ctx.fillRect(xText - 2, yText - textHeight + 2, textWidth + 50, textHeight + 6);\n        ctx.font = `bold ${setting.fontSize}px \"Noto Sans JP\"`;\n        ctx.fillStyle = setting.color;\n        ctx.textAlign = 'left';\n        ctx.fillText(`${chart.data.labels[setting.index]} ${value}%`, xText, yText);\n      });\n\n      ctx.restore();\n    }\n  }\n\n  ]\n});\n}\n<\/script>\n\n<!-- \u6a2a\u68d2\u30b0\u30e9\u30d5\u5fdc\u52df\u52d5\u6a5f -->\n<script>\n{\nlet ctx_h = document.getElementById('horizontalBarChart');\n\nlet motive_label = '\u624b\u306b\u8077\u3092\u3064\u3051\u305f\u3044, \u4f01\u696d\u7406\u5ff5\u306b\u5171\u611f, \u7814\u4fee\u5236\u5ea6\u304c\u5145\u5b9f, \u30ad\u30e3\u30ea\u30a2\u30a2\u30c3\u30d7\u652f\u63f4, \u793e\u98a8, \u798f\u5229\u539a\u751f\u304c\u5145\u5b9f'.split(',');\nlet motive_data = '74, 68, 64, 57, 46, 36'.split(',');\n\/\/ let motive_color = ['#e86e75','#fb865d','#379ea4','#66d1d1','#2961ba','#4779cc'];\nlet motive_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\n\nnew Chart(ctx_h, {\n  type: 'bar',\n  data: {\n    labels: motive_label,\n    datasets: [{\n      label: '\u5f53\u793e\u3078\u306e\u5fdc\u52df\u52d5\u6a5f\uff08\u8907\u6570\u56de\u7b54\u3042\u308a\uff09',\n      data: motive_data,\n      backgroundColor: motive_color,\n      borderRadius: 0,\n      barPercentage: 1,\n      categoryPercentage: 0.8,\n      datalabels: {\n        anchor: 'end',\n        align: 'right',\n        offset: 4,\n        color: (ctx) => ctx.dataset.backgroundColor[ctx.dataIndex],\n        formatter: (v) => `${v}\uff05`,\n        font: (f) => {\n          let size = 40 - f.dataIndex * 2;\n          return {\n            size: size,\n            weight: 'bold'\n          };\n        },\n      }\n    },\n  ]\n  },\n  options: {\n    indexAxis: 'y',\n    responsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n    maintainAspectRatio: false,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    layout: {\n      padding: { top: 40, bottom: 20, left: 10, right: 60 }\n    },\n    scales: {\n      x: {\n        display: false\n      },\n      y: {\n        grid: { display: false },\n        ticks: { display: false }\n      }\n    },\n    plugins: {\n      legend: { display: false },\n      datalabels: \n      {\n\n      },\n      tooltip: {\n        display: false,\n      },\n      title: {\n        display: false,\n        \/\/ text: '\u6a2a\u68d2\u30b5\u30f3\u30d7\u30eb',\n        font: { size: 18, weight: 'bold' },\n        padding: { bottom: 15 }\n      }\n    },\n    animation: {\n      duration: 1200,\n      easing: 'easeOutQuart'\n    }\n  },\n  plugins: [ChartDataLabels,\n  {\n      \/\/ afterDraw \u3067\u68d2\u306e\u5de6\u7aef\u306bY\u8ef8\u30e9\u30d9\u30eb\u3092\u76f4\u63a5\u63cf\u753b\n      afterDraw: chart => {\n        let ctx = chart.ctx;\n        let dataset = chart.data.datasets[0];\n        let meta = chart.getDatasetMeta(0);\n        \n        ctx.save();\n        ctx.font = 'bold 26px \"Noto Sans JP\"';\n        ctx.fillStyle = '#fff'; \/\/ \u68d2\u306e\u8272\u306b\u3088\u3063\u3066\u5909\u3048\u308b\u3068\u826f\u3044\n        ctx.textBaseline = 'left';\n        \n        meta.data.forEach((bar, i) => {\n          let x = bar.x - bar.width;\n          let y = bar.y;\n          ctx.textAlign = 'left';\n          ctx.fillText(motive_label[i].trim(), x + 10, y + 8); \/\/ 6px \u5185\u5074\u306b\u305a\u3089\u3057\u3066\u8868\u793a\n        });\n        \n        ctx.restore();\n      }\n    }\n  ]\n});\n}\n<\/script>\n\n<!-- \u5186\u30b0\u30e9\u30d5\u7269\u4ef6\u6bd4\u7387 -->\n<script>\n{\nlet ctx_pb = document.getElementById('pieB_Chart');\n\nlet bukken_label = '\u30de\u30f3\u30b7\u30e7\u30f3,\u5546\u696d\u65bd\u8a2d,\u7269\u6d41\u5009\u5eab\u30fb\u5de5\u5834,\u30aa\u30d5\u30a3\u30b9\u30d3\u30eb,\u516c\u5171\u65bd\u8a2d,\u305d\u306e\u4ed6'.split(',');\nlet bukken_data = '20,21,11,12,16,20'.split(',').map(Number);\n\/\/ let bukken_color = '#e86e75,#fb865d,#379ea4,#66d1d1,#2961ba,#4779cc'.split(',');\nlet bukken_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\n\nlet externalLabelSettings_b = [\n\t{ index: 0, fontSize: 20, color: bukken_color[0], offset: 40, lineAngle: 0 },\n\t{ index: 1, fontSize: 20, color: bukken_color[1], offset: 60, lineAngle: 1.5 },\n\t{ index: 2, fontSize: 20, color: bukken_color[2], offset: 40, lineAngle: 0 },\n\t{ index: 3, fontSize: 20, color: bukken_color[3], offset: 80, lineAngle: 0.4 },\n\t{ index: 4, fontSize: 20, color: bukken_color[4], offset: 100, lineAngle: -0.7 },\n\t{ index: 5, fontSize: 20, color: bukken_color[5], offset: 40, lineAngle: 0 }\n];\n\nnew Chart(ctx_pb, {\n  type: 'pie',\n  data: {\n    labels: bukken_label,\n    datasets: [{\n      label: '\u7269\u4ef6\u6bd4\u7387',\n      data: bukken_data,\n      backgroundColor: bukken_color,\n      borderColor: '#fff',\n      borderWidth: 2\n    }]\n  },\n  options: {\n\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\tmaintainAspectRatio: true,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    \/\/ layout: {\n  \t\/\/ padding: {\n    \/\/     top: 40,\n    \/\/     bottom: 40,\n    \/\/     left: 60,\n    \/\/     right: 60\n    \/\/   }\n    \/\/ },\n    layout: {\n      padding: {\n        top: 60,    \/\/ 100\u304b\u3089\u5c11\u3057\u6e1b\u3089\u3057\u3066\u8abf\u6574\n        bottom: 40,\n        left: 60,\n        right: 60\n      }\n    },\n    plugins: {\n      legend: {\n        display: false,\n      },\n      title: {\n        display: false,\n      },\n      datalabels: {\n        color: '#fff',\n\t\tfont: { size: 30, weight: 'bold' },\n\t\tformatter: (value) => {\n\t\t\treturn `${value}%`;\n\t\t},\n        anchor: 'center', \/\/ \u4e2d\u5fc3\u57fa\u6e96\n        align: 'start',     \/\/ \u5916\u5074\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u305a\u3089\u3059\n        offset: -50        \/\/ \u4e2d\u5fc3\u304b\u3089\u306e\u8ddd\u96e2(px)\n      },\n    },\n    animation: {\n      animateScale: true,\n      animateRotate: true\n    }\n  },\n  plugins: [ChartDataLabels, {\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u7dda\u30e9\u30d9\u30eb\u63cf\u753b\uff08\u5c0f\u3055\u3044\u30bb\u30b0\u30e1\u30f3\u30c8\u7528\uff09\n    afterDraw: (chart) => {\n      let ctx = chart.ctx;\n      let dataset = chart.data.datasets[0];\n      let meta = chart.getDatasetMeta(0);\n      let centerX = meta.data[0].x;\n      let centerY = meta.data[0].y;\n\n      ctx.save();\n\n      externalLabelSettings_b.forEach(setting => {\n        let element = meta.data[setting.index];\n        let value = dataset.data[setting.index];\n        let angle = (element.startAngle + element.endAngle) \/ 2;\n\n        \/\/ \/\/ \u7dda\u306e\u30b9\u30bf\u30fc\u30c8\n        let xStart = centerX + Math.cos(angle) * element.outerRadius;\n        let yStart = centerY + Math.sin(angle) * element.outerRadius;\n\n        \/\/ \u30e9\u30d9\u30eb\u4f4d\u7f6e\u3092\u30ab\u30b9\u30bf\u30e0\n        let xText = xStart + Math.cos(angle + setting.lineAngle) * setting.offset;\n        let yText = yStart + Math.sin(angle + setting.lineAngle) * setting.offset;\n\n        \/\/ \/\/ \u7dda\u3092\u63cf\u753b\uff08\u9014\u4e2d\u3067\u6298\u308c\u7dda\u306b\u3059\u308b\u5834\u5408\u3082\u53ef\u80fd\uff09\n        ctx.beginPath();\n        ctx.moveTo(xStart, yStart);\n        \/\/ \u7dda\u306e\u9014\u4e2d\u3092\u5c11\u3057\u6c34\u5e73\u306b\u6298\u308b\u4f8b\n        let xMid = xStart + (xText - xStart) * 0.5;\n        ctx.lineTo(xMid, yText);\n        ctx.lineTo(xText, yText);\n        ctx.strokeStyle = setting.color;\n        ctx.lineWidth = 1;\n        ctx.stroke();\n\n        \/\/ \u30e9\u30d9\u30eb\u3092\u63cf\u753b\n        \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\u3092\u6e2c\u308b\n        let textMetrics = ctx.measureText(chart.data.labels[setting.index]);\n        let textWidth = textMetrics.width;\n        let textHeight = 14; \/\/ \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\uff08\u304a\u304a\u3088\u305d\uff09\n        ctx.fillStyle = '#fff';\n        ctx.fillRect(xText - 2, yText - textHeight + 2, textWidth, textHeight);\n        ctx.font = `bold ${setting.fontSize}px \"Noto Sans JP\"`;\n        ctx.fillStyle = setting.color;\n        ctx.textAlign = 'left';\n        ctx.fillText(`${chart.data.labels[setting.index]}`, xText, yText);\n      });\n\n      ctx.restore();\n    }\n  }]\n});\n}\n<\/script>\n\n<!-- SP -->\n<!-- \u7e26\u68d2\u30b0\u30e9\u30d5 -->\n<script>\n{\nlet ctx_sp = document.getElementById('salesChart_SP');\nlet year_sales_x = '2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025'.split(',').map(String);\nlet year_sales = '0.45, 3.81, 5.36, 6.06, 7.18, 9.07, 11.91, 14.74, 17.3, 24.7, 31.5, 42.6'.split(',');\nlet year_color = '#9d947b';\n\nnew Chart(ctx_sp, {\n  type: 'bar',\n  data: {\n\tlabels: year_sales_x,\n    datasets: [{\n      label: '\u5e74\u9593\u58f2\u4e0a\uff08\u5104\u5186\uff09',\n\t  data: year_sales,\n      backgroundColor: year_color,\n      borderRadius: 0,\n      barPercentage: 1, \/\/ \u68d2\u306e\u592a\u3055\uff080\u301c1\uff09\n      categoryPercentage: 0.8, \/\/ \u68d2\u3068\u68d2\u306e\u9593\u9694\n\n    }]\n  },\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    layout: {\n      padding: { top: 60, bottom: 20, left: 10, right: 10 }\n    },\n    scales: {\n      x: {\n\t\t  type: 'category',\n        grid: {\n          display: false,\n        },\n        ticks: {\n          font: {\n            size: 15,\n            family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n          },\n          color: '#333',\n          padding: 8,\n          maxRotation: 45,\n          minRotation: 45,\n          callback: function(value, index, ticks) {\n          let label = this.getLabelForValue(index);\n          if (typeof label === 'string' && label.includes('\u4e88\u6e2c')) {\n            return label.replace('\u4e88\u6e2c', '');\n          }\n          return label;\n          }\n        }\n      },\n      y: {\n        beginAtZero: true,\n        ticks: {\n          stepSize: 10,\n          font: {\n            size: 12,\n            \/\/ weight: 'bold',\n            family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n          },\n          color: '#333',\n          callback: function(value) {\n            return value + '\u5104';\n          }\n        },\n        grid: {\n          color: '#ddd',\n          lineWidth: 1\n        }\n      }\n    },\n    plugins: {\n      legend: {\n        display: false \/\/ \u4e0a\u90e8\u30e9\u30d9\u30eb\u3092\u975e\u8868\u793a\n      },\n      tooltip: {\n        backgroundColor: '#333',\n        titleFont: { size: 14 },\n        bodyFont: { size: 14 },\n        callbacks: {\n          label: (context) => context.formattedValue.trim() + ' \u5104\u5186'\n        }\n      },\n      datalabels: {\n        anchor: 'end',\n        align: 'top',\n        color: year_color,\n        font: {\n          size: 8,\n          weight: 'bold',\n          family: \"'Noto Sans JP', sans-serif\"\n        },\n          formatter: (value) => {\n            if (value < 1) {\n              return Math.round(value * 10000) + '\u4e07';\n            }\n            let oku = Math.floor(value);\n            let man = Math.round((value - oku) * 10000);\n            return man ? oku + '\u5104\\n' + man + '\u4e07' : oku + '\u5104';\n          }\n      }\n    },\n    animation: {\n      duration: 1500,\n      easing: 'easeOutQuart'\n    }\n  },\n  plugins: [\n  ChartDataLabels,\n  {\n    id: 'customPredictionLabel',\n    afterDraw(chart) {\n      let ctx = chart.ctx;\n      let xAxis = chart.scales.x;\n\n\t\t\/\/ X\u8ef8\u30e9\u30d9\u30eb\u914d\u5217\n\t  let labels = chart.data.labels;\n      let lastLabel = labels[labels.length - 1];\n\n      if (!lastLabel.includes('\u4e88\u6e2c')) {\n        return;\n      }\n\n      let lastIndex = xAxis.ticks.length - 1;\n      let x = xAxis.getPixelForTick(lastIndex);\n      let y = xAxis.bottom + 5;\n\n      ctx.save();\n      ctx.font = '12px \"Noto Sans JP\"';\n      ctx.fillStyle = '#333';\n      ctx.textAlign = 'center';\n      ctx.fillText('(\u4e88\u6e2c)', x, y);\n      ctx.restore();\n    }\n  }\n]\n});\n}\n<\/script>\n\n\n<!-- \u6298\u308c\u7dda\u30b0\u30e9\u30d5 -->\n<script>\n{\n    \/\/ let linemax = 600;\n\t  let linelabels = '2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024,2025'.split(',');\n    let linedata   = '18, 54, 67, 72, 82, 127, 155, 208, 270, 368, 508, 695'.split(',');\n    let linedata_color   = '#9d947b';\n\n    let lineCtx_sp = document.getElementById(\"lineChart_SP\");\n    let lineConfig_sp = {\n    type: 'line',\n    data: {\n        labels: linelabels,\n        datasets: [{\n        data: linedata,\n        borderColor: linedata_color,\n        backgroundColor: linedata_color,\n        pointRadius: 5,       \/\/ \u70b9\u306e\u30b5\u30a4\u30ba\n        pointBackgroundColor: linedata_color\n        }],\n    },\n    options: {\n\t\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\t\tmaintainAspectRatio: false,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n\t\tlayout: {\n\t\t  padding: { top: 60, bottom: 20, left: 10, right: 15 }\n\t\t},\n        scales: {\n          x: {\n              grid: {\n                display: false,\n              },\n              ticks: {\n                font: {\n                  size: 15,\n                  family: \"'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif\"\n                },\n                color: '#333',\n                padding: 8,\n                maxRotation: 45,\n                minRotation: 45,\n                callback: function(value, index, ticks) {\n                let label = this.getLabelForValue(index);\n                if (typeof label === 'string' && label.includes('\u4e88\u6e2c')) {\n                  return label.replace('\u4e88\u6e2c', '');\n                }\n                return label;\n                }\n              }\n            },\n            y: {\n                suggestedMin: 0,\n                \/\/ suggestedMax: linemax,\n                ticks: {\n                  stepSize: 100,\n                  font: {\n                    size: 14\n                  },\n                  callback: function(value) {\n                    return value + '\u4eba';\n                  },\n                },\n            }\n        },\n        plugins: {\n            legend: { display: false },\n            datalabels: {\n                anchor: 'end',   \/\/ \u30c7\u30fc\u30bf\u30dd\u30a4\u30f3\u30c8\u306e\u4e0a\u306b\u914d\u7f6e\n                align: 'top',\n                color: linedata_color,\n                font: { \n                  size: 16,\n                  weight: 'bold'\n                 },\n                offset: 15,\n                formatter: (value) => value.trim()\n                \/\/ formatter: (value) => {\n                \/\/   return `${value}\u4eba`;\n                \/\/ },\n            }\n        },\n    },\n    plugins: [ChartDataLabels]\n    };\n    let lineChart_sp = new Chart(lineCtx_sp, lineConfig_sp, {\n        plugins: [{\n            afterDraw(chart, args, options) {\n                let { ctx, chartArea: { top, right , bottom, left, width, height } } = chart;\n                ctx.save();\n            },\n        },\n      ]\n    });\n}\n<\/script>\n\n\n\n<!-- \u5186\u30b0\u30e9\u30d5 -->\n<script>\n{\nlet ctx_p_sp = document.getElementById('pieChart_SP');\n\n\/\/ let externalLabelSettings = [\n\/\/   { index: 2, fontSize: 16, color: '#379ea4', offset: 80, lineAngle: -0.8 },\n\/\/   { index: 3, fontSize: 16, color: '#66d1d1', offset: 50, lineAngle: 0 },\n\/\/   { index: 4, fontSize: 16, color: '#2961ba', offset: 40, lineAngle: 1.0 }\n\/\/ ];\n\nlet gen_label = '20\u4ee3, 30\u4ee3, 40\u4ee3, 50\u4ee3, 60\u4ee3\u4ee5\u4e0a'.split(',');\nlet gen_data = '66, 23, 6, 3, 2'.split(',');\nlet gen_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\nlet externalLabelSettings = [\n  { index: 2, fontSize: 16, color: gen_color[2], offset: 80, lineAngle: -0.8 },\n  { index: 3, fontSize: 16, color: gen_color[3], offset: 50, lineAngle: 0 },\n  { index: 4, fontSize: 16, color: gen_color[4], offset: 40, lineAngle: 1.3 }\n];\nnew Chart(ctx_p_sp, {\n  type: 'pie',\n  data: {\n    labels: gen_label,\n    datasets: [{\n      label: '\u58f2\u4e0a\u69cb\u6210\u6bd4',\n      data: gen_data,\n      backgroundColor: gen_color,\n      borderColor: '#fff',\n      borderWidth: 2\n    }]\n  },\n  options: {\n\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\tmaintainAspectRatio: true,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    \/\/ layout: {\n    \/\/   padding: {\n    \/\/     top: 100,\n    \/\/     bottom: 40,\n    \/\/     left: 20,\n    \/\/     right: 20\n    \/\/   }\n    \/\/ },\n    layout: {\n      padding: {\n        top: 60,    \/\/ 100\u304b\u3089\u5c11\u3057\u6e1b\u3089\u3057\u3066\u8abf\u6574\n        bottom: 40,\n        left: 10,\n        right: 10\n      }\n    },\n    plugins: {\n      legend: {\n        display: false,\n      },\n      title: {\n        display: false,\n      },\n      datalabels: {\n        color: '#fff',\n        font: function(context) {\n            let sizeList = [40, 30, 0, 0, 0]; \/\/ \u30c7\u30fc\u30bf\u3054\u3068\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\n            return {\n              size: sizeList[context.dataIndex] || 12,\n              weight: 'bold'\n            };\n          },\n          formatter: (value, context) => {\n            let total = context.chart._metasets[0].total;\n            let percent = Math.round((value \/ total) * 100);\n            return percent >= 10\n              ? `${context.chart.data.labels[context.dataIndex].trim()}\\n${percent}%`\n              : '';\n          }\n      },\n      tooltip: {\n        callbacks: {\n          label: function(context) {\n            let label = context.label || '';\n            let value = context.parsed;\n            let total = context.chart._metasets[0].total;\n            let percent = ((value \/ total) * 100).toFixed(1);\n            return `${label}: ${value} (${percent}%)`;\n          }\n        }\n      }\n    },\n    animation: {\n      animateScale: true,\n      animateRotate: true\n    }\n  },\n  plugins: [ChartDataLabels, {\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u7dda\u30e9\u30d9\u30eb\u63cf\u753b\uff08\u5c0f\u3055\u3044\u30bb\u30b0\u30e1\u30f3\u30c8\u7528\uff09\n    afterDraw: (chart) => {\n      let ctx = chart.ctx;\n      let dataset = chart.data.datasets[0];\n      let meta = chart.getDatasetMeta(0);\n      let centerX = meta.data[0].x;\n      let centerY = meta.data[0].y;\n      ctx.save();\n\n      externalLabelSettings.forEach(setting => {\n        let element = meta.data[setting.index];\n        let value = dataset.data[setting.index];\n        let angle = (element.startAngle + element.endAngle) \/ 2;\n\n        \/\/ \u7dda\u306e\u30b9\u30bf\u30fc\u30c8\n        let xStart = centerX + Math.cos(angle) * element.outerRadius;\n        let yStart = centerY + Math.sin(angle) * element.outerRadius;\n\n        \/\/ \u30e9\u30d9\u30eb\u4f4d\u7f6e\u3092\u30ab\u30b9\u30bf\u30e0\n        let xText = xStart + Math.cos(angle + setting.lineAngle) * setting.offset;\n        let yText = yStart + Math.sin(angle + setting.lineAngle) * setting.offset;\n\n        \/\/ \u7dda\u3092\u63cf\u753b\uff08\u9014\u4e2d\u3067\u6298\u308c\u7dda\u306b\u3059\u308b\u5834\u5408\u3082\u53ef\u80fd\uff09\n        ctx.beginPath();\n        ctx.moveTo(xStart, yStart);\n        \/\/ \u7dda\u306e\u9014\u4e2d\u3092\u5c11\u3057\u6c34\u5e73\u306b\u6298\u308b\u4f8b\n        let xMid = xStart + (xText - xStart) * 0.5;\n        ctx.lineTo(xMid, yText);\n        ctx.lineTo(xText, yText);\n        ctx.strokeStyle = setting.color;\n        ctx.lineWidth = 1;\n        ctx.stroke();\n\n        \/\/ \u30e9\u30d9\u30eb\u3092\u63cf\u753b\n        \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\u3092\u6e2c\u308b\n        let textMetrics = ctx.measureText(chart.data.labels[setting.index]);\n        let textWidth = textMetrics.width;\n        let textHeight = 14; \/\/ \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\n        ctx.fillStyle = '#fff'; \/\/ \u4f8b: \u80cc\u666f\u304c\u767d\u306e\u5834\u5408\n        ctx.fillRect(xText - 2, yText - textHeight + 2, textWidth + 50, textHeight + 6);\n        ctx.font = `bold ${setting.fontSize}px \"Noto Sans JP\"`;\n        ctx.fillStyle = setting.color;\n        ctx.textAlign = 'left';\n        ctx.fillText(`${chart.data.labels[setting.index]} ${value}%`, xText, yText);\n      });\n\n      ctx.restore();\n    }\n  }\n\n  ]\n});\n}\n<\/script>\n\n<!-- \u6a2a\u68d2\u30b0\u30e9\u30d5\u5fdc\u52df\u52d5\u6a5f -->\n<script>\n{\nlet ctx_h_sp = document.getElementById('horizontalBarChart_SP');\n\nlet motive_label = '\u624b\u306b\u8077\u3092\u3064\u3051\u305f\u3044, \u4f01\u696d\u7406\u5ff5\u306b\u5171\u611f, \u7814\u4fee\u5236\u5ea6\u304c\u5145\u5b9f, \u30ad\u30e3\u30ea\u30a2\u30a2\u30c3\u30d7\u652f\u63f4, \u793e\u98a8, \u798f\u5229\u539a\u751f\u304c\u5145\u5b9f'.split(',');\nlet motive_data = '74, 68, 64, 57, 46, 36'.split(',');\n\/\/ let motive_color = ['#e86e75','#fb865d','#379ea4','#66d1d1','#2961ba','#4779cc'];\nlet motive_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\nnew Chart(ctx_h_sp, {\n  type: 'bar',\n  data: {\n    labels: motive_label,\n    datasets: [{\n      label: '\u5f53\u793e\u3078\u306e\u5fdc\u52df\u52d5\u6a5f\uff08\u8907\u6570\u56de\u7b54\u3042\u308a\uff09',\n      data: motive_data,\n      backgroundColor: motive_color,\n      borderRadius: 0,\n      barPercentage: 1,\n      categoryPercentage: 0.8,\n      datalabels: {\n        anchor: 'end',\n        align: 'right',\n        offset: 4,\n        color: (ctx) => ctx.dataset.backgroundColor[ctx.dataIndex],\n        formatter: (v) => `${v}\uff05`,\n        font: (f) => {\n          let size = 30 - f.dataIndex * 2;\n          return {\n            size: size,\n            weight: 'bold'\n          };\n        },\n      }\n    },\n  ]\n  },\n  options: {\n    indexAxis: 'y',\n    responsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n    maintainAspectRatio: false,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    layout: {\n      padding: { top: 40, bottom: 20, left: 10, right: 60 }\n    },\n    scales: {\n      x: {\n        display: false\n      },\n      y: {\n        grid: { display: false },\n        ticks: { display: false }\n      }\n    },\n    plugins: {\n      legend: { display: false },\n      datalabels: \n      {\n\n      },\n      tooltip: {\n        display: false,\n      },\n      title: {\n        display: false,\n        text: '\u6a2a\u68d2\u30b5\u30f3\u30d7\u30eb',\n        font: { size: 18, weight: 'bold' },\n        padding: { bottom: 15 }\n      }\n    },\n    animation: {\n      duration: 1200,\n      easing: 'easeOutQuart'\n    }\n  },\n  plugins: [ChartDataLabels,\n  {\n      \/\/ afterDraw \u3067\u68d2\u306e\u5de6\u7aef\u306bY\u8ef8\u30e9\u30d9\u30eb\u3092\u76f4\u63a5\u63cf\u753b\n      afterDraw: chart => {\n        let ctx = chart.ctx;\n        let dataset = chart.data.datasets[0];\n        let meta = chart.getDatasetMeta(0);\n        \n        ctx.save();\n        ctx.font = 'bold 14px \"Noto Sans JP\"';\n        ctx.fillStyle = '#fff'; \/\/ \u68d2\u306e\u8272\u306b\u3088\u3063\u3066\u5909\u3048\u308b\u3068\u826f\u3044\n        ctx.textBaseline = 'left';\n        \n        meta.data.forEach((bar, i) => {\n          let x = bar.x - bar.width;\n          let y = bar.y;\n          ctx.textAlign = 'left';\n          ctx.fillText(motive_label[i], x + 6, y + 4); \/\/ 6px \u5185\u5074\u306b\u305a\u3089\u3057\u3066\u8868\u793a\n        });\n        \n        ctx.restore();\n      }\n    }\n  ]\n});\n}\n<\/script>\n\n<!-- \u5186\u30b0\u30e9\u30d5\u7269\u4ef6\u6bd4\u7387 -->\n<script>\n{\nlet ctx_pb_sp = document.getElementById('pieB_Chart_SP');\n\nlet bukken_label = '\u30de\u30f3\u30b7\u30e7\u30f3,\u5546\u696d\u65bd\u8a2d,\u7269\u6d41\u5009\u5eab\u30fb\u5de5\u5834,\u30aa\u30d5\u30a3\u30b9\u30d3\u30eb,\u516c\u5171\u65bd\u8a2d,\u305d\u306e\u4ed6'.split(',');\nlet bukken_data = '20,21,11,12,16,20'.split(',').map(Number);\n\/\/ let bukken_color = '#e86e75,#fb865d,#379ea4,#66d1d1,#2961ba,#4779cc'.split(',');\nlet bukken_color = '#9d947b,#ada48b,#bab199,#c7bea5,#d4cbb4,#ded6c1'.split(',');\nlet externalLabelSettings_b = [\n\t{ index: 0, fontSize: 15, color: bukken_color[0], offset: 40, lineAngle: 0 },\n\t{ index: 1, fontSize: 15, color: bukken_color[1], offset: 40, lineAngle: 1.5 },\n\t{ index: 2, fontSize: 15, color: bukken_color[2], offset: 40, lineAngle: 0 },\n\t{ index: 3, fontSize: 15, color: bukken_color[3], offset: 80, lineAngle: 0.4 },\n\t{ index: 4, fontSize: 15, color: bukken_color[4], offset: 80, lineAngle: -0.7 },\n\t{ index: 5, fontSize: 15, color: bukken_color[5], offset: 40, lineAngle: 0 }\n];\nnew Chart(ctx_pb_sp, {\n  type: 'pie',\n  data: {\n    labels: bukken_label,\n    datasets: [{\n      label: '\u7269\u4ef6\u6bd4\u7387',\n      data: bukken_data,\n      backgroundColor: bukken_color,\n      borderColor: '#fff',\n      borderWidth: 2\n    }]\n  },\n  options: {\n\tresponsive: true,            \/\/ \u2190 \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\n\tmaintainAspectRatio: true,  \/\/ \u2190 \u7e26\u6a2a\u6bd4\u3092\u56fa\u5b9a\u305b\u305a\u3001\u89aa\u8981\u7d20\u306b\u30d5\u30a3\u30c3\u30c8\u3055\u305b\u308b\n    \/\/ layout: {\n  \t\/\/ padding: {\n    \/\/     top: 40,\n    \/\/     bottom: 40,\n    \/\/     left: 60,\n    \/\/     right: 60\n    \/\/   }\n    \/\/ },\n    layout: {\n      padding: {\n        top: 60,    \/\/ 100\u304b\u3089\u5c11\u3057\u6e1b\u3089\u3057\u3066\u8abf\u6574\n        bottom: 40,\n        left: 60,\n        right: 60\n      }\n    },\n    plugins: {\n      legend: {\n        display: false,\n      },\n      title: {\n        display: false,\n      },\n      datalabels: {\n        color: '#fff',\n\t\tfont: { size: 23, weight: 'bold' },\n\t\tformatter: (value) => {\n\t\t\treturn `${value}%`;\n\t\t},\n        anchor: 'center', \/\/ \u4e2d\u5fc3\u57fa\u6e96\n        align: 'start',     \/\/ \u5916\u5074\u306b\u30c6\u30ad\u30b9\u30c8\u3092\u305a\u3089\u3059\n        offset: -50        \/\/ \u4e2d\u5fc3\u304b\u3089\u306e\u8ddd\u96e2(px)\n      },\n    },\n    animation: {\n      animateScale: true,\n      animateRotate: true\n    }\n  },\n  plugins: [ChartDataLabels, {\n    \/\/ \u30ab\u30b9\u30bf\u30e0\u7dda\u30e9\u30d9\u30eb\u63cf\u753b\uff08\u5c0f\u3055\u3044\u30bb\u30b0\u30e1\u30f3\u30c8\u7528\uff09\n    afterDraw: (chart) => {\n      let ctx = chart.ctx;\n      let dataset = chart.data.datasets[0];\n      let meta = chart.getDatasetMeta(0);\n      let centerX = meta.data[0].x;\n      let centerY = meta.data[0].y;\n\n      ctx.save();\n\n      externalLabelSettings_b.forEach(setting => {\n        let element = meta.data[setting.index];\n        let value = dataset.data[setting.index];\n        let angle = (element.startAngle + element.endAngle) \/ 2;\n\n        \/\/ \/\/ \u7dda\u306e\u30b9\u30bf\u30fc\u30c8\n        let xStart = centerX + Math.cos(angle) * element.outerRadius;\n        let yStart = centerY + Math.sin(angle) * element.outerRadius;\n\n        \/\/ \u30e9\u30d9\u30eb\u4f4d\u7f6e\u3092\u30ab\u30b9\u30bf\u30e0\n        let xText = xStart + Math.cos(angle + setting.lineAngle) * setting.offset;\n        let yText = yStart + Math.sin(angle + setting.lineAngle) * setting.offset;\n\n        \/\/ \/\/ \u7dda\u3092\u63cf\u753b\uff08\u9014\u4e2d\u3067\u6298\u308c\u7dda\u306b\u3059\u308b\u5834\u5408\u3082\u53ef\u80fd\uff09\n        ctx.beginPath();\n        ctx.moveTo(xStart, yStart);\n        \/\/ \u7dda\u306e\u9014\u4e2d\u3092\u5c11\u3057\u6c34\u5e73\u306b\u6298\u308b\u4f8b\n        let xMid = xStart + (xText - xStart) * 0.5;\n        ctx.lineTo(xMid, yText);\n        ctx.lineTo(xText, yText);\n        ctx.strokeStyle = setting.color;\n        ctx.lineWidth = 1;\n        ctx.stroke();\n\n        \/\/ \u30e9\u30d9\u30eb\u3092\u63cf\u753b\n        \/\/ \u6587\u5b57\u30b5\u30a4\u30ba\u3092\u6e2c\u308b\n        let textMetrics = ctx.measureText(chart.data.labels[setting.index]);\n        let textWidth = textMetrics.width;\n        let textHeight = 14; \/\/ \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u8a2d\u5b9a\uff08\u304a\u304a\u3088\u305d\uff09\n        ctx.fillStyle = '#fff';\n        ctx.fillRect(xText - 2, yText - textHeight + 2, textWidth, textHeight);\n        ctx.font = `bold ${setting.fontSize}px \"Noto Sans JP\"`;\n        ctx.fillStyle = setting.color;\n        ctx.textAlign = 'left';\n        ctx.fillText(`${chart.data.labels[setting.index]}`, xText, yText);\n      });\n\n      ctx.restore();\n    }\n  }]\n});\n}\n<\/script>\n<!-- SP -->\n\n<script>\nfunction applyScale() {\n    const wrap = document.getElementById(\"scaleContainer\");\n    if (!wrap) return;\n\n    \/\/ \u89aa\u8981\u7d20\uff08.container\uff09\u306e\u5e45\u3092\u53d6\u5f97\uff08\u4f59\u767d\u3092\u9664\u3044\u305f\u6709\u52b9\u5e45\uff09\n    const parent = wrap.parentElement;\n    const availableWidth = parent.clientWidth;\n\n    \/\/ CSS\u3067\u6307\u5b9a\u3057\u305f\u56fa\u5b9a\u5e45\u3068\u5408\u308f\u305b\u308b\n    \/\/ const baseWidth = 1070;\n    const baseWidth = 1500;\n\n    let scale = 1;\n\n    \/\/ \u753b\u9762\u5e45\u304c768px\u3088\u308a\u5927\u304d\u3044\u3001\u304b\u3064\u89aa\u306e\u5e45\u304c\u57fa\u6e96\u3088\u308a\u5c0f\u3055\u3044\u5834\u5408\u306e\u307f\u7e2e\u5c0f\n    if (window.innerWidth > 768) {\n        if (availableWidth < baseWidth) {\n            scale = availableWidth \/ baseWidth;\n        } else {\n            scale = 1;\n        }\n        \n        \/\/ \u30b9\u30b1\u30fc\u30eb\u3092\u9069\u7528\n        wrap.style.transform = `scale(${scale})`;\n        \/\/ \u30b9\u30b1\u30fc\u30eb\u306b\u3088\u3063\u3066\u751f\u3058\u308b\u4e0b\u306e\u4f59\u767d\u3092\u524a\u308b\n        \/\/ offsetHeight\uff08\u5143\u306e\u9ad8\u3055\uff09\u306bscale\u3092\u639b\u3051\u3066\u5b9f\u969b\u306e\u8868\u793a\u9ad8\u3055\u3092\u89aa\u306b\u30bb\u30c3\u30c8\u3059\u308b\n        wrap.style.height = (wrap.scrollHeight * scale) + \"px\";\n    } else {\n        \/\/ 768px\u4ee5\u4e0b\u306e\u6642\u306fJS\u306b\u3088\u308b\u5236\u5fa1\u3092\u30ea\u30bb\u30c3\u30c8\n        wrap.style.transform = \"\";\n        wrap.style.height = \"\";\n    }\n}\n\n\/\/ \u5b9f\u884c\u30bf\u30a4\u30df\u30f3\u30b0\u306e\u5236\u5fa1\nwindow.addEventListener(\"resize\", applyScale);\nwindow.addEventListener(\"load\", applyScale);\n\/\/ Chart.js\u306a\u3069\u306e\u63cf\u753b\u5b8c\u4e86\u3092\u5f85\u3064\u305f\u3081\u306b\u5c11\u3057\u9045\u5ef6\u3055\u305b\u3066\u5b9f\u884c\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n    setTimeout(applyScale, 500);\n});\n<\/script>\n\r\n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1462,"parent":267,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-138","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/pages\/138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=138"}],"version-history":[{"count":134,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":1352,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/pages\/138\/revisions\/1352"}],"up":[{"embeddable":true,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/pages\/267"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=\/wp\/v2\/media\/1462"}],"wp:attachment":[{"href":"https:\/\/www.yell-inc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}