[
  {
    "id": 1611,
    "title": "レーダーチャート_F-2",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z\" fill=\"#9aa8c9\"/><path d=\"M221.87,83.16A104.1,104.1,0,1,1,195.67,49l22.67-22.68a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32l27.72-27.72a40,40,0,1,0,17.87,31.09,8,8,0,1,1,16-.9,56,56,0,1,1-22.38-41.65L184.3,60.39a87.88,87.88,0,1,0,23.13,29.67,8,8,0,0,1,14.44-6.9Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "メディア・ビジュアル",
      "レーダーチャート"
    ],
    "slug": "lazyblock/radar-chart",
    "description": "",
    "category": "Lazyblocks Free",
    "category_label": "Lazyblocks Free",
    "supports": {
      "customClassName": true,
      "anchor": false,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [
        "wide",
        "full"
      ],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_c0eb0d4bd8": {
        "type": "text",
        "name": "chart_title",
        "default": "プラグイン評価",
        "label": "タイトル",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_4159fe4f7d": {
        "type": "text",
        "name": "label_1",
        "default": "",
        "label": "項目1の名前",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_64588d468e": {
        "type": "text",
        "name": "label_2",
        "default": "",
        "label": "項目2の名前",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_46ca75408b": {
        "type": "text",
        "name": "label_3",
        "default": "",
        "label": "項目3の名前",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_583a9a461d": {
        "type": "text",
        "name": "label_4",
        "default": "",
        "label": "項目4の名前",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_8acb9741dc": {
        "type": "text",
        "name": "label_5",
        "default": "",
        "label": "項目5の名前",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_7268304b57": {
        "type": "range",
        "name": "score_1",
        "default": "3",
        "label": "項目1のスコア",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_d5eb814489": {
        "type": "range",
        "name": "score_2",
        "default": "3",
        "label": "項目2のスコア",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_ee3ad146db": {
        "type": "range",
        "name": "score_3",
        "default": "3",
        "label": "項目3のスコア",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_9cba004723": {
        "type": "range",
        "name": "score_4",
        "default": "3",
        "label": "項目4のスコア",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      },
      "control_70d8bb4a8f": {
        "type": "range",
        "name": "score_5",
        "default": "3",
        "label": "項目5のスコア",
        "help": "",
        "child_of": "",
        "placement": "content",
        "group": "default",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "min": "1",
        "max": "5",
        "step": "1"
      }
    },
    "code": {
      "output_method": "html",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<div class=\"swell-pro-chart-card\" style=\"width: 100%; max-width: 900px; margin: 1.5em auto; background: transparent; padding: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;\">\r\n  \r\n  <div style=\"width: 100%; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #0073b7;\">\r\n    <h3 style=\"margin: 0; font-size: 0.95rem; font-weight: 700; color: #333; display: flex; align-items: center;\">\r\n      <span style=\"width: 3px; height: 1em; background: #0073b7; margin-right: 8px; border-radius: 2px;\"></span>\r\n      {{chart_title}}\r\n    </h3>\r\n  </div>\r\n\r\n  <div style=\"position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center;\">\r\n    <canvas id=\"chart-{{blockId}}\" style=\"max-width: 100% !important; max-height: 100% !important;\"></canvas>\r\n  </div>\r\n</div>\r\n\r\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const canvasElement = document.getElementById('chart-{{blockId}}');\r\n  \r\n  if (canvasElement) {\r\n    const mainColor = '#0073b7';\r\n    const gridColor = 'rgba(0, 0, 0, 0.1)';\r\n\r\n    const wrapLabels = (label) => {\r\n      const maxLength = 8; // 改行を少し遅らせて1行の密度を上げ、チャートへの圧迫を減らす\r\n      if (label.length <= maxLength) return label;\r\n      const words = [];\r\n      for (let i = 0; i < label.length; i += maxLength) {\r\n        words.push(label.substring(i, i + maxLength));\r\n      }\r\n      return words;\r\n    };\r\n\r\n    const rawLabels = ['{{label_1}}', '{{label_2}}', '{{label_3}}', '{{label_4}}', '{{label_5}}'];\r\n    const wrappedLabels = rawLabels.map(label => wrapLabels(label));\r\n\r\n    new Chart(canvasElement, {\r\n      type: 'radar',\r\n      data: {\r\n        labels: wrappedLabels,\r\n        datasets: [{\r\n          data: [{{score_1}}, {{score_2}}, {{score_3}}, {{score_4}}, {{score_5}}],\r\n          backgroundColor: 'rgba(0, 115, 183, 0.12)',\r\n          borderColor: mainColor,\r\n          borderWidth: 2, \r\n          pointBackgroundColor: '#fff',\r\n          pointBorderColor: mainColor,\r\n          pointBorderWidth: 1.5,\r\n          pointRadius: 3\r\n        }]\r\n      },\r\n      options: {\r\n        responsive: true,\r\n        maintainAspectRatio: true,\r\n        layout: {\r\n          padding: { top: 0, bottom: 0, left: 0, right: 0 }\r\n        },\r\n        plugins: {\r\n          legend: { display: false }\r\n        },\r\n        scales: {\r\n          r: {\r\n            min: 0,\r\n            max: 5,\r\n            beginAtZero: true,\r\n            ticks: {\r\n              display: true,\r\n              stepSize: 1,\r\n              color: '#bbb',\r\n              font: { size: 10, weight: '500' },\r\n              showLabelBackdrop: false,\r\n              z: 10\r\n            },\r\n            grid: { color: gridColor },\r\n            angleLines: { color: gridColor },\r\n            pointLabels: {\r\n              font: {\r\n                size: 10.5, \r\n                weight: '700',\r\n                lineHeight: 1.2\r\n              },\r\n              color: '#444',\r\n              // パディングを「0」にしてチャートを最大化\r\n              padding: 0 \r\n            }\r\n          }\r\n        },\r\n        animation: { duration: 800 }\r\n      }\r\n    });\r\n  }\r\n});\r\n</script>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": false
    },
    "style": {
      "block": "",
      "editor": ""
    },
    "script": {
      "view": ""
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]