{"id":7982,"date":"2025-01-08T14:31:00","date_gmt":"2025-01-08T05:31:00","guid":{"rendered":"https:\/\/fastcoding.jp\/blog\/?p=7982"},"modified":"2025-01-08T13:46:35","modified_gmt":"2025-01-08T04:46:35","slug":"javascript-bar-graph-plugins","status":"publish","type":"post","link":"https:\/\/fastcoding.jp\/blog\/all\/frontend\/javascript-bar-graph-plugins\/","title":{"rendered":"\u3010\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u5c4b\u306e\u30cd\u30bf\u5e33\u3011\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u306f\u3053\u308c\u3067\u6c7a\u307e\u308a\uff01\u68d2\u30b0\u30e9\u30d5\u4f5c\u6210\u306b\u5f79\u7acb\u3064JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea5\u9078"},"content":{"rendered":"<div class=\"the_content\"><p data-pm-slice=\"1 1 []\">\u6700\u8fd1\u3001Web\u30b5\u30a4\u30c8\u3067\u30c7\u30fc\u30bf\u3092\u30b0\u30e9\u30d5\u306b\u3057\u3066\u898b\u305b\u308b\u3053\u3068\u304c\u5897\u3048\u3066\u304d\u307e\u3057\u305f\u3002\u305f\u3068\u3048\u3070\u3001\u4f1a\u793e\u6848\u5185\u30da\u30fc\u30b8\u3067\u58f2\u4e0a\u3084\u696d\u7e3e\u306e\u63a8\u79fb\u3092\u30b0\u30e9\u30d5\u306b\u3057\u3066\u308f\u304b\u308a\u3084\u3059\u304f\u3057\u305f\u308a\u3001\u30a2\u30f3\u30b1\u30fc\u30c8\u7d50\u679c\u3092\u30d3\u30b8\u30e5\u30a2\u30eb\u3067\u793a\u3057\u305f\u308a\u3059\u308b\u4f8b\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002\u3053\u3046\u3057\u305f\u30b0\u30e9\u30d5\u306f\u3001\u30d1\u30c3\u3068\u898b\u305f\u3060\u3051\u3067\u60c5\u5831\u304c\u4f1d\u308f\u308a\u3084\u3059\u304f\u3001\u898b\u308b\u4eba\u306b\u3068\u3063\u3066\u3082\u4fbf\u5229\u3067\u3059\u3088\u306d\u3002<\/p>\n<p>\u305d\u3093\u306a\u30b0\u30e9\u30d5\u306e\u4e2d\u3067\u3082\u4eca\u56de\u306f\u3001\u68d2\u30b0\u30e9\u30d5\u306b\u7740\u76ee\u3002\u7279\u5fb4\u3068\u3068\u3082\u306b\u3001\u68d2\u30b0\u30e9\u30d5\u3092\u7c21\u5358\u306b\u4f5c\u308c\u308bJavaScript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<p data-pm-slice=\"1 1 []\">\u3053\u306e\u8a18\u4e8b\u306f\u3001\u6b21\u306e\u3088\u3046\u306a\u4eba\u306b\u5411\u3051\u3066\u66f8\u3044\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul data-spread=\"false\" data-pm-slice=\"3 3 []\">\n<li>Web\u30b5\u30a4\u30c8\u306b\u30b0\u30e9\u30d5\u3092\u53d6\u308a\u5165\u308c\u305f\u3044\u65b0\u4eba\u30a8\u30f3\u30b8\u30cb\u30a2<\/li>\n<li>\u4eca\u4f7f\u3063\u3066\u3044\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5225\u306e\u3082\u306e\u306b\u5909\u3048\u3088\u3046\u3068\u8003\u3048\u3066\u3044\u308b\u4e2d\u7d1a\u30a8\u30f3\u30b8\u30cb\u30a2<\/li>\n<li>\u30c7\u30b6\u30a4\u30f3\u306b\u3053\u3060\u308f\u3063\u305f\u30b0\u30e9\u30d5\u3092\u63a2\u3057\u3066\u3044\u308bWeb\u30c7\u30b6\u30a4\u30ca\u30fc<\/li>\n<\/ul>\n\n\n<p>\u3053\u306e\u30b7\u30ea\u30fc\u30ba\u3067\u306f\u3001\u30b0\u30e9\u30d5\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u7279\u5fb4\u3084\u4f7f\u3044\u65b9\u3092\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9\u4ed8\u304d\u3067\u308f\u304b\u308a\u3084\u3059\u304f\u7d39\u4ecb\u3057\u3066\u3044\u304f\u306e\u3067\u3001\u305c\u3072\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u68d2\u30b0\u30e9\u30d5\u3068\u306f\uff1f<\/h2>\n\n\n\n<p>\u68d2\u30b0\u30e9\u30d5\u306f\u3001\u30c7\u30fc\u30bf\u3092\u68d2\u72b6\u306e\u56f3\u3067\u8868\u73fe\u3059\u308b\u30b0\u30e9\u30d5\u306e\u4e00\u7a2e\u3002\u6a2a\u8ef8\u3084\u7e26\u8ef8\u306b\u30ab\u30c6\u30b4\u30ea\u3084\u9805\u76ee\u3092\u4e26\u3079\u3001\u68d2\u306e\u9577\u3055\u3084\u9ad8\u3055\u3067\u6570\u5024\u3092\u793a\u3057\u307e\u3059\u3002\u30b7\u30f3\u30d7\u30eb\u3067\u76f4\u611f\u7684\u306b\u30c7\u30fc\u30bf\u3092\u7406\u89e3\u3057\u3084\u3059\u3044\u305f\u3081\u3001\u6700\u3082\u3088\u304f\u4f7f\u308f\u308c\u308b\u30b0\u30e9\u30d5\u5f62\u5f0f\u306e\u3072\u3068\u3064\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u68d2\u30b0\u30e9\u30d5\u304c\u5411\u3044\u3066\u3044\u308b\u6d3b\u7528\u4f8b<\/h3>\n\n\n\n<p>\u68d2\u30b0\u30e9\u30d5\u306f\u6b21\u306e\u3088\u3046\u306a\u30b0\u30e9\u30d5\u3092\u3067\u6d3b\u8e8d\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u6bd4\u8f03\u3092\u793a\u3059\u3068\u304d<\/strong>\uff1a\u30ab\u30c6\u30b4\u30ea\u3054\u3068\u306e\u58f2\u4e0a\u3084\u4eba\u53e3\u306a\u3069\u306e\u6570\u5024\u3092\u6bd4\u3079\u308b\u5834\u5408\u3002<\/li>\n\n\n\n<li><strong>\u63a8\u79fb\u3084\u5909\u5316\u3092\u898b\u305b\u308b\u3068\u304d<\/strong>\uff1a\u6642\u9593\u3084\u671f\u9593\u3054\u3068\u306e\u30c7\u30fc\u30bf\u306e\u5909\u52d5\u3092\u793a\u3059\u5834\u5408\u3002<\/li>\n\n\n\n<li><strong>\u30e9\u30f3\u30ad\u30f3\u30b0\u306e\u8868\u793a<\/strong>\uff1a\u6570\u5024\u306e\u5927\u5c0f\u3084\u9806\u4f4d\u3092\u4e00\u76ee\u3067\u4f1d\u3048\u305f\u3044\u5834\u5408\u3002<\/li>\n<\/ul>\n\n\n\n<p>\u305f\u3068\u3048\u3070\u3001\u300c\u6708\u3054\u3068\u306e\u58f2\u4e0a\u6bd4\u8f03\u300d\u3084\u300c\u88fd\u54c1\u3054\u3068\u306e\u58f2\u4e0a\u30e9\u30f3\u30ad\u30f3\u30b0\u300d\u3092\u793a\u3059\u3068\u304d\u306b\u68d2\u30b0\u30e9\u30d5\u306f\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u306d\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 \u68d2\u30b0\u30e9\u30d5\u306e\u7a2e\u985e<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u7e26\u68d2\u30b0\u30e9\u30d5<\/strong>\uff1a\u7e26\u65b9\u5411\u306b\u68d2\u3092\u4e26\u3079\u3066\u30c7\u30fc\u30bf\u3092\u793a\u3059\u4e00\u822c\u7684\u306a\u5f62\u5f0f\u3002<\/li>\n\n\n\n<li><strong>\u6a2a\u68d2\u30b0\u30e9\u30d5<\/strong>\uff1a\u6a2a\u65b9\u5411\u306b\u68d2\u3092\u4e26\u3079\u3001\u9805\u76ee\u6570\u304c\u591a\u3044\u3068\u304d\u3084\u30e9\u30d9\u30eb\u304c\u9577\u3044\u3068\u304d\u306b\u4f7f\u3044\u3084\u3059\u3044\u5f62\u5f0f\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.4 \u68d2\u30b0\u30e9\u30d5\u306e\u30e1\u30ea\u30c3\u30c8\u3068\u30c7\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n\n<p><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8996\u899a\u7684\u306b\u308f\u304b\u308a\u3084\u3059\u304f\u3001\u60c5\u5831\u304c\u3059\u3050\u306b\u4f1d\u308f\u308b\u3002<\/li>\n\n\n\n<li>\u30c7\u30fc\u30bf\u306e\u6bd4\u8f03\u3084\u9806\u4f4d\u4ed8\u3051\u304c\u7c21\u5358\u306b\u3067\u304d\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u306e\u91cf\u304c\u591a\u3059\u304e\u308b\u3068\u3001\u68d2\u306e\u6570\u304c\u5897\u3048\u3066\u898b\u3065\u3089\u304f\u306a\u308b\u3053\u3068\u304c\u3042\u308b\u3002<\/li>\n\n\n\n<li>\u6bd4\u7387\u3084\u5272\u5408\u306e\u6bd4\u8f03\u306b\u306f\u9069\u3055\u305a\u3001\u5186\u30b0\u30e9\u30d5\u3084\u7a4d\u307f\u4e0a\u3052\u30b0\u30e9\u30d5\u306e\u65b9\u304c\u5411\u3044\u3066\u3044\u308b\u5834\u5408\u304c\u3042\u308b\u3002<\/li>\n\n\n\n<li>\u30b0\u30e9\u30d5\u304c\u5358\u7d14\u3059\u304e\u308b\u3068\u3001\u7d30\u304b\u306a\u5206\u6790\u3084\u76f8\u95a2\u95a2\u4fc2\u306e\u8868\u73fe\u306b\u306f\u4e0d\u5411\u304d\u306a\u3053\u3068\u3082\u3042\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u3076\u969b\u306e\u30c1\u30a7\u30c3\u30af\u30dd\u30a4\u30f3\u30c8<\/h2>\n\n\n\n<p>\u30b0\u30e9\u30d5\u3092Web\u30b5\u30a4\u30c8\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u6570\u591a\u304f\u3042\u308a\u307e\u3059\u304c\u3001\u9078\u3073\u65b9\u3092\u9593\u9055\u3048\u308b\u3068\u4f7f\u3044\u3065\u3089\u304b\u3063\u305f\u308a\u3001\u76ee\u7684\u306b\u5408\u308f\u306a\u304b\u3063\u305f\u308a\u3059\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002\u30e9\u30a4\u30d6\u30e9\u30ea\u9078\u5b9a\u306e\u969b\u306b\u306f\u4e0b\u8a186\u3064\u306e\u30dd\u30a4\u30f3\u30c8\u3092\u30c1\u30a7\u30c3\u30af\u3059\u308b\u3053\u3068\u3092\u304a\u3059\u3059\u3081\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5c0e\u5165\u306e\u3057\u3084\u3059\u3055<\/strong><br>\u521d\u5fc3\u8005\u3067\u3082\u3059\u3050\u306b\u4f7f\u3048\u308b\u304b\u3069\u3046\u304b\u306f\u91cd\u8981\u3067\u3059\u3002CDN\u3092\u4f7f\u3063\u3066\u7c21\u5358\u306b\u8aad\u307f\u8fbc\u3081\u308b\u3082\u306e\u3084\u3001\u8a2d\u5b9a\u304c\u5c11\u306a\u304f\u3066\u3082\u52d5\u4f5c\u3059\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u3076\u3068\u3088\u3044\u3067\u3057\u3087\u3046\u3002<\/li>\n\n\n\n<li><strong>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027<\/strong><br>\u30c7\u30b6\u30a4\u30f3\u3084\u8272\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3092\u67d4\u8edf\u306b\u5909\u66f4\u3067\u304d\u308b\u304b\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002\u30d6\u30e9\u30f3\u30c9\u3084\u30c7\u30b6\u30a4\u30f3\u30c6\u30fc\u30de\u306b\u5408\u308f\u305b\u305f\u8abf\u6574\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u3001\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027\u306e\u9ad8\u3044\u3082\u306e\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc<\/strong><br>\u30b9\u30de\u30db\u3084\u30bf\u30d6\u30ec\u30c3\u30c8\u306a\u3069\u3001\u753b\u9762\u30b5\u30a4\u30ba\u304c\u7570\u306a\u308b\u30c7\u30d0\u30a4\u30b9\u3067\u3082\u304d\u308c\u3044\u306b\u8868\u793a\u3055\u308c\u308b\u304b\u3092\u30c1\u30a7\u30c3\u30af\u3057\u307e\u3057\u3087\u3046\u3002\u7279\u306b\u3001\u30d3\u30b8\u30cd\u30b9\u30b5\u30a4\u30c8\u3067\u306f\u30e2\u30d0\u30a4\u30eb\u5bfe\u5fdc\u304c\u91cd\u8981\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/strong><br>\u8868\u73fe\u3059\u308b\u30b0\u30e9\u30d5\u306b\u3082\u3088\u308a\u307e\u3059\u304c\u3001\u5927\u898f\u6a21\u30c7\u30fc\u30bf\u3092\u6271\u3046\u5834\u5408\u3001\u8868\u793a\u901f\u5ea6\u3084\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3082\u6c17\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u7279\u306b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u7528\u9014\u3067\u306f\u3001\u8efd\u91cf\u3067\u9ad8\u901f\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u6c42\u3081\u3089\u308c\u307e\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30b5\u30dd\u30fc\u30c8\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/strong><br>\u516c\u5f0f\u30b5\u30a4\u30c8\u3084GitHub\u3067\u306e\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1\u3084\u3001\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u5145\u5b9f\u5ea6\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002\u4f7f\u3044\u65b9\u304c\u308f\u304b\u3089\u306a\u3044\u3068\u304d\u306b\u53c2\u8003\u306b\u306a\u308b\u60c5\u5831\u304c\u3042\u308b\u304b\u3069\u3046\u304b\u306f\u91cd\u8981\u3067\u3059\u3002<\/li>\n\n\n\n<li><strong>\u30e9\u30a4\u30bb\u30f3\u30b9\u3068\u5229\u7528\u6599<\/strong><br>\u5229\u7528\u898f\u7d04\u3084\u30e9\u30a4\u30bb\u30f3\u30b9\u5f62\u614b\u3082\u78ba\u8a8d\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002\u5546\u7528\u5229\u7528\u304c\u53ef\u80fd\u304b\u3069\u3046\u304b\u3001\u7121\u6599\u3067\u4f7f\u3048\u308b\u304b\u3001\u6709\u6599\u30d7\u30e9\u30f3\u304c\u5fc5\u8981\u304b\u306a\u3069\u3092\u4e8b\u524d\u306b\u30c1\u30a7\u30c3\u30af\u3059\u308b\u3053\u3068\u304c\u5927\u5207\u3067\u3059\u3002<br><\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u304a\u3059\u3059\u3081\u30e9\u30a4\u30d6\u30e9\u30ea\u7d39\u4ecb<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1 Chart.js<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0fURL<\/strong>: <a href=\"https:\/\/www.chartjs.org\/\" title=\"https:\/\/www.chartjs.org\/\">https:\/\/www.chartjs.org\/<\/a><\/li>\n\n\n\n<li><strong>\u7279\u5fb4<\/strong>: Chart.js\u306f\u30b7\u30f3\u30d7\u30eb\u3067\u3042\u308a\u306a\u304c\u3089\u62e1\u5f35\u6027\u304c\u9ad8\u304f\u3001\u30c7\u30b6\u30a4\u30f3\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u76f4\u611f\u7684\u306b\u8a2d\u5b9a\u3067\u304d\u308b\u70b9\u304c\u5927\u304d\u306a\u9b45\u529b\u3067\u3059\u3002\u521d\u5fc3\u8005\u306b\u3082\u6271\u3044\u3084\u3059\u304f\u3001\u57fa\u672c\u7684\u306a\u68d2\u30b0\u30e9\u30d5\u304b\u3089\u8907\u96d1\u306a\u30ab\u30b9\u30bf\u30e0\u30b0\u30e9\u30d5\u307e\u3067\u5e45\u5e83\u304f\u5bfe\u5fdc\u53ef\u80fd\u3002\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3088\u308b\u62e1\u5f35\u6027\u3082\u9ad8\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u30b7\u30f3\u30d7\u30eb\u306aAPI\u3067\u521d\u5fc3\u8005\u306b\u3082\u6271\u3044\u3084\u3059\u3044\u3002<br>\u30fb\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc<br>\u30fb\u5c0f\u898f\u6a21\u30c7\u30fc\u30bf\u306e\u51e6\u7406\u304c\u5f97\u610f\u3067\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u826f\u3044\u3002<br>\u30fb\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9\u304c\u5145\u5b9f\u3057\u3001\u554f\u984c\u89e3\u6c7a\u304c\u3057\u3084\u3059\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u30c7\u30fc\u30bf\u91cf\u304c\u591a\u3044\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u4f4e\u4e0b\u306e\u53ef\u80fd\u6027\u3042\u308a\u3002<br>\u30fb\u983b\u7e41\u306a\u66f4\u65b0\u304c\u5fc5\u8981\u306a\u5834\u5408\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306b\u8ab2\u984c\u304c\u3042\u308b\u3002<br>\u30fbD3.js\u307b\u3069\u306e\u81ea\u7531\u5ea6\u306f\u306a\u304f\u3001\u7279\u6b8a\u306a\u30c7\u30b6\u30a4\u30f3\u306f\u96e3\u3057\u3044\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2 D3.js<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0fURL<\/strong>: <a href=\"https:\/\/d3js.org\/\" title=\"\">https:\/\/d3js.org\/<\/a><\/li>\n\n\n\n<li><strong>\u7279\u5fb4<\/strong>: \u9ad8\u5ea6\u306a\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u53ef\u80fd\u3067\u3001\u52d5\u7684\u306a\u30b0\u30e9\u30d5\u306e\u751f\u6210\u30fb\u66f4\u65b0\u306a\u3069\u30c7\u30fc\u30bf\u306e\u53ef\u8996\u5316\u304c\u5f97\u610f\u3002\u30c7\u30fc\u30bf\u30c9\u30ea\u30d6\u30f3\u306a\u30a2\u30d7\u30ed\u30fc\u30c1\u3092\u63d0\u4f9b\u3057\u3001\u8907\u96d1\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u30b0\u30e9\u30d5\u306e\u4f5c\u6210\u306b\u9069\u3057\u3066\u3044\u308b\u3002\u81ea\u7531\u5ea6\u304c\u9ad8\u304f\u3001\u30d7\u30ed\u30b0\u30e9\u30e0\u5236\u5fa1\u306b\u6163\u308c\u3066\u3044\u308b\u4eba\u5411\u3051\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u9ad8\u5ea6\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u3067\u3001\u8907\u96d1\u306a\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\u304c\u4f5c\u6210\u53ef\u80fd\u3002<br>\u30fb\u8c4a\u5bcc\u306a\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30b5\u30dd\u30fc\u30c8\u304c\u3042\u308b\u3002<br>\u30fb\u8efd\u91cf\u3067\u52d5\u4f5c\u304c\u901f\u3044\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u521d\u5fc3\u8005\u306b\u3068\u3063\u3066\u306f\u5b66\u7fd2\u30b3\u30b9\u30c8\u304c\u9ad8\u3044\u3002<br>\u30fb\u30b7\u30f3\u30d7\u30eb\u306a\u30b0\u30e9\u30d5\u4f5c\u6210\u306b\u306f\u30b3\u30fc\u30c9\u91cf\u304c\u591a\u304f\u306a\u308a\u304c\u3061\u3002<br>\u30fb\u4ed6\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u6bd4\u3079\u3066\u521d\u671f\u8a2d\u5b9a\u3084\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u304c\u624b\u9593\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3 ApexCharts<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0fURL<\/strong>: <a href=\"https:\/\/apexcharts.com\/\">https:\/\/apexcharts.com\/<\/a><\/li>\n\n\n\n<li><strong>\u7279\u5fb4<\/strong>: \u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u30b0\u30e9\u30d5\u4f5c\u6210\u304c\u7c21\u5358\u3002\u30e2\u30c0\u30f3\u306a\u30c7\u30b6\u30a4\u30f3\u3068\u591a\u6a5f\u80fd\u306aUI\u3002\u6642\u9593\u8ef8\u30c7\u30fc\u30bf\u3084\u52d5\u7684\u30c7\u30fc\u30bf\u8868\u793a\u306b\u5f37\u304f\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u7528\u9014\u306b\u3082\u9069\u3057\u3066\u3044\u308b\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u521d\u5fc3\u8005\u306b\u3082\u6271\u3044\u3084\u3059\u3044\u30b7\u30f3\u30d7\u30eb\u306aAPI\u8a2d\u8a08\u3002<br>\u30fb\u9ad8\u5ea6\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u3084\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u6a5f\u80fd\u304c\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u5229\u7528\u53ef\u80fd\u3002<br>\u30fb\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0\u3084\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u7c21\u5358\u306b\u5b9f\u88c5\u3067\u304d\u308b\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fbD3.js\u307b\u3069\u81ea\u7531\u5ea6\u306f\u9ad8\u304f\u306a\u304f\u3001\u30ab\u30b9\u30bf\u30e0\u30b0\u30e9\u30d5\u306e\u4f5c\u6210\u306b\u306f\u9650\u754c\u304c\u3042\u308b\u3002<br>\u30fb\u30e9\u30a4\u30d6\u30e9\u30ea\u30b5\u30a4\u30ba\u306f\u82e5\u5e72\u5927\u304d\u3081 (\u8907\u96d1\u306a\u30b7\u30b9\u30c6\u30e0\u3067\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8003\u616e\u304c\u5fc5\u8981)\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4 Google Charts<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0fURL<\/strong>: <a href=\"https:\/\/developers.google.com\/chart\/\">https:\/\/developers.google.com\/chart\/<\/a><\/li>\n\n\n\n<li><strong>\u7279\u5fb4<\/strong>: \u30af\u30e9\u30a6\u30c9\u30d9\u30fc\u30b9\u3067\u9ad8\u901f\u8868\u793a\u3002Google\u306e\u30b5\u30dd\u30fc\u30c8\u3068\u5b89\u5b9a\u6027\u3092\u6d3b\u304b\u3057\u3001API\u9023\u643a\u304c\u5bb9\u6613\u3002\u30b7\u30f3\u30d7\u30eb\u306a\u5b9f\u88c5\u3067\u57fa\u672c\u7684\u306a\u30b0\u30e9\u30d5\u3092\u7d20\u65e9\u304f\u4f5c\u6210\u3067\u304d\u308b\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u7121\u6599\u3067\u5546\u7528\u5229\u7528\u3067\u304d\u308b\u3002<br>\u7c21\u5358\u306a\u8a2d\u5b9a\u3067\u9ad8\u54c1\u8cea\u306a\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u53ef\u80fd\u3002<br>Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u3068\u306e\u9023\u643a\u304c\u5f37\u529b\u3067\u3001\u5916\u90e8\u30c7\u30fc\u30bf\u30bd\u30fc\u30b9\u306e\u53d6\u308a\u8fbc\u307f\u304c\u5bb9\u6613\u3002<br>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3068\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u6a5f\u80fd\u3092\u6a19\u6e96\u88c5\u5099\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30aa\u30d5\u30e9\u30a4\u30f3\u3067\u306f\u5229\u7528\u3057\u3065\u3089\u3044 (Google\u306eCDN\u306b\u4f9d\u5b58)\u3002<br>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306e\u67d4\u8edf\u6027\u306fD3.js\u3084Chart.js\u3088\u308a\u3082\u4f4e\u3044\u3002<br>\u9ad8\u5ea6\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u6a5f\u80fd\u3084\u7279\u6b8a\u306a\u30ab\u30b9\u30bf\u30e0\u30c1\u30e3\u30fc\u30c8\u306f\u5b9f\u88c5\u3057\u3065\u3089\u3044\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5 Chartist.js<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u516c\u5f0fURL<\/strong>: <a href=\"https:\/\/gionkunz.github.io\/chartist-js\/\">https:\/\/gionkunz.github.io\/chartist-js\/<\/a><\/li>\n\n\n\n<li><strong>\u7279\u5fb4<\/strong>: \u8efd\u91cf\u3067\u30b7\u30f3\u30d7\u30eb\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3067\u30c7\u30b6\u30a4\u30f3\u6027\u304c\u9ad8\u304f\u3001CSS\u3067\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u3084\u3059\u3044\u3002\u57fa\u672c\u7684\u306a\u30b0\u30e9\u30d5\u306e\u4f5c\u6210\u306b\u9069\u3057\u3066\u304a\u308a\u3001\u5c0f\u898f\u6a21\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3084\u30e2\u30d0\u30a4\u30eb\u7528\u9014\u306b\u5411\u3044\u3066\u3044\u308b\u3002<\/li>\n\n\n\n<li><strong>\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u8efd\u91cf\u3067\u9ad8\u901f\u306b\u52d5\u4f5c\u3059\u308b\u3002<br>\u30fbCSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u5909\u66f4\u304c\u5bb9\u6613\u3002<br>\u30fb\u30b7\u30f3\u30d7\u30eb\u306a\u30b3\u30fc\u30c9\u3067\u5b9f\u88c5\u53ef\u80fd\u3002<br>\u30fb\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3088\u308b\u6a5f\u80fd\u62e1\u5f35\u3082\u53ef\u80fd\u3002<\/li>\n\n\n\n<li><strong>\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><br>\u30fb\u9ad8\u5ea6\u306a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u6a5f\u80fd (\u30ba\u30fc\u30e0\u3084\u30d1\u30f3) \u306f\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u3002<br>\u30fbD3.js\u3084ApexCharts\u3068\u6bd4\u8f03\u3059\u308b\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027\u306b\u5236\u7d04\u304c\u3042\u308b\u3002<br>\u30fb\u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\u306e\u898f\u6a21\u304c\u5927\u304d\u3044\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u304c\u4f4e\u4e0b\u3059\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u30e9\u30a4\u30d6\u30e9\u30ea\u6bd4\u8f03\u8868<\/h2>\n\n\n\n<p>\u524d\u8ff0\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u9078\u5b9a\u30dd\u30a4\u30f3\u30c8\u3092\u307e\u3068\u3081\u305f\u8868\u306f\u4e0b\u8a18\u306e\u3068\u304a\u308a<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">\u540d\u79f0<\/th><th>\u5c0e\u5165\u306e\u3057\u3084\u3059\u3055<\/th><th>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027<\/th><th>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc<\/th><th>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/th><th>\u30b5\u30dd\u30fc\u30c8\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/th><th>\u30e9\u30a4\u30bb\u30f3\u30b9<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">Chart.js<\/td><td>\u9ad8\u3044<\/td><td>\u9ad8\u3044<\/td><td>\u6a19\u6e96\u5bfe\u5fdc<\/td><td>\u8efd\u91cf\u3067\u9ad8\u901f<\/td><td>\u516c\u5f0f\u3068GitHub\u3067\u5145\u5b9f<\/td><td>MIT\u30e9\u30a4\u30bb\u30f3\u30b9<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">D3.js<\/td><td>\u4e2d\u7a0b\u5ea6<\/td><td>\u975e\u5e38\u306b\u9ad8\u3044<\/td><td>\u624b\u52d5\u5bfe\u5fdc<\/td><td>\u5927\u898f\u6a21\u30c7\u30fc\u30bf\u5bfe\u5fdc<\/td><td>\u8c4a\u5bcc\u306a\u30b5\u30f3\u30d7\u30eb\u3068\u89e3\u8aac<\/td><td>BSD\u30e9\u30a4\u30bb\u30f3\u30b9<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">ApexCharts<\/td><td>\u9ad8\u3044<\/td><td>\u9ad8\u3044<\/td><td>\u6a19\u6e96\u5bfe\u5fdc<\/td><td>\u8efd\u91cf\u304b\u3064\u9ad8\u901f<\/td><td>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5145\u5b9f<\/td><td>MIT\u30e9\u30a4\u30bb\u30f3\u30b9<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Google Charts<\/td><td>\u9ad8\u3044<\/td><td>\u4e2d\u7a0b\u5ea6<\/td><td>\u6a19\u6e96\u5bfe\u5fdc<\/td><td>\u9ad8\u901f<\/td><td>Google\u516c\u5f0f\u30b5\u30dd\u30fc\u30c8<\/td><td>\u7121\u6599<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">Chartist.js<\/td><td>\u9ad8\u3044<\/td><td>\u9ad8\u3044<\/td><td>\u6a19\u6e96\u5bfe\u5fdc<\/td><td>\u8efd\u91cf<\/td><td>\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30d9\u30fc\u30b9<\/td><td>MIT\u30e9\u30a4\u30bb\u30f3\u30b9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\u3092\u4f7f\u3063\u305f\u5c0e\u5165\u4f8b<\/h2>\n\n\n\n<p>\u4eca\u56de\u7d39\u4ecb\u3057\u305f\u5404\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3063\u3066\u3001\u540c\u3058\u6761\u4ef6\u306e\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\u304b\u3089\u68d2\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u624b\u9806\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002\u305d\u308c\u305e\u308c\u306e\u7279\u5fb4\u3092\u6d3b\u304b\u3057\u305f\u30aa\u30d7\u30b7\u30e7\u30f3\u3082\u3064\u3051\u3066\u307f\u305f\u306e\u3067\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n\n\n\n<div class=\"wp-block-group has-background\" style=\"background-color:#fbecec\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading has-text-align-center has-background\" style=\"background-color:#fbecec\">\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf\uff1a\u6708\u5225\u58f2\u4e0a\u9ad8<\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-background\" style=\"background-color:#fbecec\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">\u6708<\/th><th>\u58f2\u4e0a (\u4e07\u5186)<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">1\u6708<\/td><td>120<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">2\u6708<\/td><td>150<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">3\u6708<\/td><td>180<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">4\u6708<\/td><td>200<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">5\u6708<\/td><td>170<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">6\u6708<\/td><td>210<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">7\u6708<\/td><td>250<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">8\u6708<\/td><td>300<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">9\u6708<\/td><td>280<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">10\u6708<\/td><td>260<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">11\u6708<\/td><td>230<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">12\u6708<\/td><td>190<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Chart.js<\/h3>\n\n\n\n<p>\u4eca\u56de\u306f\u3001\u30aa\u30d7\u30b7\u30e7\u30f3\u3068\u3057\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u3082\u4f7f\u7528\u3057\u3066\u307f\u307e\u3057\u305f<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/chartjs.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"428\" src=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/chartjs.gif\" alt=\"\" class=\"wp-image-8041\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5c0e\u5165\u624b\u9806<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1.CDN\u30ea\u30f3\u30af\u306e\u8ffd\u52a0<\/strong> (HTML\u306e<code>&lt;head><\/code>\u5185\u306b\u8a18\u8ff0)<\/h5>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-1dae20a64844d1d4c7f6f72b2e1b0473\"><code>\n<code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\">&lt;\/script><\/code>\n\n<code><span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"><\/span><\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2.HTML\u3068JavaScript\u30b3\u30fc\u30c9<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-6f5dbd5b3d8d0b86f093ba3e34e1517e\"><code>\n<code>&lt;canvas id=\"salesChart\" width=\"400\" height=\"200\">&lt;\/canvas>\n&lt;script>\nconst ctx = document.getElementById('salesChart').getContext('2d');\nnew Chart(ctx, {\n    type: 'bar',\n    data: {\n        labels: &#91;'1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708'],\n        datasets: &#91;{\n            label: '\u6708\u5225\u58f2\u4e0a\u9ad8 (\u4e07\u5186)',\n            data: &#91;120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190],\n            backgroundColor: 'rgba(75, 192, 192, 0.2)',\n            borderColor: 'rgba(75, 192, 192, 1)',\n            borderWidth: 1\n        }]\n    },\n<\/code>    options: {\n        scales: {\n            y: { beginAtZero: true }\n        },\n        animation: {\n        duration: 2000,\n        easing: 'easeInOutBounce',\n        },\n        \n    }<code>});\n&lt;\/script><\/code>\n<code>\n<\/code><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">D3.js<\/h3>\n\n\n\n<p>D3.js\u3067\u306f\u3001\u30af\u30ea\u30c3\u30af\u3057\u305f\u68d2\u3092\u5f37\u8abf\u8868\u793a\u3059\u308b\u4f8b\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/d3js-1.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"824\" height=\"462\" src=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/d3js-1.gif\" alt=\"\" class=\"wp-image-8053\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5c0e\u5165\u624b\u9806<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1.CDN\u30ea\u30f3\u30af\u306e\u8ffd\u52a0<\/strong> (HTML\u306e<code>&lt;head><\/code>\u5185\u306b\u8a18\u8ff0)<\/h5>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-a15f7d4941c56dc4da7750a6c1b06fa6\"><code>\n&lt;script src=\"https:\/\/d3js.org\/d3.v7.min.js\">&lt;\/script>\n\n\n<code><span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"><\/span><\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2.CSS\u3092\u8ffd\u52a0<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-1c995f8510e8514ec32c7cb1e31f2abc\"><code>\n   &lt;style>\n    .tooltip {\n      position: absolute;\n      background-color: lightgray;\n      padding: 5px;\n      border-radius: 5px;\n      font-size: 12px;\n      pointer-events: none; \/* \u30db\u30d0\u30fc\u6642\u306b\u30ab\u30fc\u30bd\u30eb\u304c\u53cd\u5fdc\u3057\u306a\u3044 *\/\n    }\n  &lt;\/style>\n<code>\n<\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">3<strong>.HTML\u3068JavaScript\u30b3\u30fc\u30c9<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-988476a97655dcf1354ff3af85715366\"><code>\n &lt;h3>\u6708\u5225\u58f2\u4e0a\u9ad8 (\u30af\u30ea\u30c3\u30af\u3067\u5f37\u8abf\u8868\u793a)&lt;\/h3>\n  &lt;div id=\"chart\">&lt;\/div>\n  &lt;script>\n    \/\/ \u30c7\u30fc\u30bf\u30bb\u30c3\u30c8\n    const data = &#91;120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190];\n    const labels = &#91;'1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708'];\n\n    \/\/ \u30b0\u30e9\u30d5\u8a2d\u5b9a\n    const margin = { top: 30, right: 30, bottom: 50, left: 60 };\n    const width = 800 - margin.left - margin.right;\n    const height = 400 - margin.top - margin.bottom;\n\n    \/\/ SVG\u306e\u4f5c\u6210\n    const svg = d3.select('#chart')\n      .append('svg')\n      .attr('width', width + margin.left + margin.right)\n      .attr('height', height + margin.top + margin.bottom)\n      .append('g')\n      .attr('transform', `translate(${margin.left},${margin.top})`);\n\n    \/\/ \u8ef8\u30b9\u30b1\u30fc\u30eb\u8a2d\u5b9a\n    const x = d3.scaleBand()\n      .domain(labels)\n      .range(&#91;0, width])\n      .padding(0.1);\n\n    const y = d3.scaleLinear()\n      .domain(&#91;0, d3.max(data) + 50])\n      .range(&#91;height, 0]);\n\n    \/\/ \u8ef8\u306e\u63cf\u753b\n    svg.append('g')\n      .attr('transform', `translate(0,${height})`)\n      .call(d3.axisBottom(x));\n\n    svg.append('g')\n      .call(d3.axisLeft(y).ticks(10));\n\n    \/\/ \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u8ffd\u52a0\n    const tooltip = d3.select('body').append('div')\n      .attr('class', 'tooltip')\n      .style('opacity', 0);\n\n    \/\/ \u5f37\u8abf\u72b6\u614b\u3092\u4fdd\u6301\u3059\u308b\u5909\u6570\n    let selectedBar = null;\n\n    \/\/ \u68d2\u30b0\u30e9\u30d5\u306e\u63cf\u753b\n    svg.selectAll('.bar')\n      .data(data)\n      .enter()\n      .append('rect')\n      .attr('class', 'bar')\n      .attr('x', (d, i) => x(labels&#91;i]))\n      .attr('y', d => y(d))\n      .attr('width', x.bandwidth())\n      .attr('height', d => height - y(d))\n      .attr('fill', 'steelblue')\n\n      \/\/ \u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u8868\u793a\n      .on('mouseover', (event, d) => {\n        if (event.target !== selectedBar) {\n          d3.select(event.target).attr('fill', 'orange'); \/\/ \u30db\u30d0\u30fc\u6642\u306b\u8272\u5909\u66f4\n        }\n        tooltip.transition().duration(200).style('opacity', 0.9);\n        tooltip.html(`\u58f2\u4e0a: ${d}\u4e07\u5186`)\n          .style('left', `${event.pageX + 10}px`)\n          .style('top', `${event.pageY - 20}px`);\n      })\n      .on('mousemove', (event) => {\n        tooltip.style('left', `${event.pageX + 10}px`)\n          .style('top', `${event.pageY - 20}px`);\n      })\n      .on('mouseout', (event) => {\n        if (event.target !== selectedBar) {\n          d3.select(event.target).attr('fill', 'steelblue'); \/\/ \u5143\u306e\u8272\u306b\u623b\u3059\n        }\n        tooltip.transition().duration(500).style('opacity', 0);\n      })\n\n      \/\/ \u30af\u30ea\u30c3\u30af\u3067\u5f37\u8abf\u8868\u793a\n      .on('click', (event, d) => {\n        \/\/ \u4ee5\u524d\u9078\u629e\u3055\u308c\u305f\u30d0\u30fc\u3092\u5143\u306e\u8272\u306b\u623b\u3059\n        if (selectedBar) {\n          d3.select(selectedBar).attr('fill', 'steelblue');\n        }\n\n        \/\/ \u73fe\u5728\u9078\u629e\u3055\u308c\u305f\u30d0\u30fc\u3092\u5f37\u8abf\u8868\u793a\n        selectedBar = event.target;\n        d3.select(selectedBar).attr('fill', 'red'); \/\/ \u30af\u30ea\u30c3\u30af\u6642\u306b\u8272\u3092\u8d64\u306b\n      });\n  &lt;\/script>\n<code>\n<\/code><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">ApexCharts<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/ApexCharts.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"588\" src=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/ApexCharts.gif\" alt=\"\" class=\"wp-image-8061\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5c0e\u5165\u624b\u9806<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1.CDN\u30ea\u30f3\u30af\u306e\u8ffd\u52a0<\/strong> <\/h5>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-159042594dcb5a2c3a32d3b60f1e96aa\"><code>\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/apexcharts\">&lt;\/script>\n\n\n<code><span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"><\/span><\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">2<strong>.HTML\u3068JavaScript\u30b3\u30fc\u30c9<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-e5e56680b37d0ef321bc0f51703db46d\"><code>\n &lt;div id=\"apexChart\">&lt;\/div>\n&lt;script>\nvar options = {\n    chart: { type: 'bar' },\n    series: &#91;{\n        name: '\u58f2\u4e0a (\u4e07\u5186)',\n        data: &#91;120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190]\n    }],\n    xaxis: { categories: &#91;'1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708'] }\n};\n\nvar chart = new ApexCharts(document.querySelector(\"#apexChart\"), options);\nchart.render();\n&lt;\/script>\n<code>\n<\/code><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Google Charts<\/h3>\n\n\n\n<p>Google Charts\u3067\u306f\u3001\u30c7\u30fc\u30bf\u3092CSV\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u53ef\u80fd\u306a\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/googlechart.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"522\" src=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/googlechart.gif\" alt=\"\" class=\"wp-image-8065\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5c0e\u5165\u624b\u9806<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1.CDN\u30ea\u30f3\u30af\u306e\u8ffd\u52a0<\/strong> (HTML\u306e<code>&lt;head><\/code>\u5185\u306b\u8a18\u8ff0)<\/h5>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-316ac2ce8243ee43c97f8f738cfcf27c\"><code>\n&lt;script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\">&lt;\/script>\n\n\n<code><span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"><\/span><\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2.JavaScript\u3092\u8ffd\u52a0<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-6b6c618ca62036dbccb33f8e2b39b896\"><code>\n&lt;script type=\"text\/javascript\">\n    \/\/ Google Charts\u306e\u30ed\u30fc\u30c9\n    google.charts.load('current', { packages: &#91;'corechart'] });\n    google.charts.setOnLoadCallback(drawChart);\n\n    let chartData; \/\/ \u30c7\u30fc\u30bf\u3092\u4fdd\u6301\u3059\u308b\u5909\u6570\n\n    function drawChart() {\n      \/\/ \u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\n      chartData = google.visualization.arrayToDataTable(&#91;\n        &#91;'\u6708', '\u58f2\u4e0a (\u4e07\u5186)'],\n        &#91;'1\u6708', 120], &#91;'2\u6708', 150], &#91;'3\u6708', 180], &#91;'4\u6708', 200],\n        &#91;'5\u6708', 170], &#91;'6\u6708', 210], &#91;'7\u6708', 250], &#91;'8\u6708', 300],\n        &#91;'9\u6708', 280], &#91;'10\u6708', 260], &#91;'11\u6708', 230], &#91;'12\u6708', 190]\n      ]);\n\n      \/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a\n      var options = {\n        title: '\u6708\u5225\u58f2\u4e0a\u9ad8',\n        hAxis: { title: '\u6708' },\n        vAxis: { title: '\u58f2\u4e0a (\u4e07\u5186)', minValue: 0 },\n        legend: { position: 'top' },\n        colors: &#91;'#76A7FA'],\n        animation: {\n          startup: true,\n          duration: 1000,\n          easing: 'out'\n        }\n      };\n\n      \/\/ \u30b0\u30e9\u30d5\u306e\u63cf\u753b\n      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));\n      chart.draw(chartData, options);\n    }\n\n    \/\/ CSV\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u6a5f\u80fd\n    function exportToCSV() {\n      \/\/ \u30c7\u30fc\u30bf\u3092CSV\u5f62\u5f0f\u306b\u5909\u63db\n      let csvContent = 'data:text\/csv;charset=utf-8,';\n      for (let i = 0; i &lt; chartData.getNumberOfRows() + 1; i++) {\n        let row = &#91;];\n        for (let j = 0; j &lt; chartData.getNumberOfColumns(); j++) {\n          row.push(i === 0 ? chartData.getColumnLabel(j) : chartData.getValue(i - 1, j));\n        }\n        csvContent += row.join(',') + '\\n';\n      }\n\n      \/\/ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30ea\u30f3\u30af\u3092\u4f5c\u6210\n      const encodedUri = encodeURI(csvContent);\n      const link = document.createElement('a');\n      link.setAttribute('href', encodedUri);\n      link.setAttribute('download', 'sales_data.csv');\n      document.body.appendChild(link);\n\n      \/\/ \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5b9f\u884c\n      link.click();\n    }\n  &lt;\/script>\n<code>\n<\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">3<strong>.HTML<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-9680607f398db411fc19200792593b6d\"><code>\n   &lt;h3>\u6708\u5225\u58f2\u4e0a\u9ad8 (CSV\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u6a5f\u80fd\u4ed8\u304d)&lt;\/h3>\n  &lt;div id=\"chart_div\" style=\"width: 800px; height: 400px;\">&lt;\/div>\n  &lt;button onclick=\"exportToCSV()\">CSV\u30a8\u30af\u30b9\u30dd\u30fc\u30c8&lt;\/button>\n<code>\n<\/code><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Chartist.js<\/h3>\n\n\n\n<p>Chartist.js\u3067\u306f\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u306e\u30b0\u30e9\u30d5\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/chartlist.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"444\" src=\"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/chartlist.gif\" alt=\"\" class=\"wp-image-8073\"\/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>\u5c0e\u5165\u624b\u9806<\/strong><\/h4>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>1.CDN\u30ea\u30f3\u30af\u306e\u8ffd\u52a0<\/strong> (HTML\u306e<code>&lt;head><\/code>\u5185\u306b\u8a18\u8ff0)<\/h5>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-98e497f93aae745aa88fd3f5e6698731\"><code>\n  &lt;!-- Chartist\u306eCSS\u3068JavaScript\u306e\u8aad\u307f\u8fbc\u307f -->\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/chartist\/dist\/chartist.min.css\">\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartist\/dist\/chartist.min.js\">&lt;\/script>\n\n\n<code><span style=\"background-color: initial; font-family: inherit; font-size: inherit;\"><\/span><\/code><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>2.HTML\u3068JavaScript\u3092\u8ffd\u52a0<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code has-vivid-green-cyan-color has-black-background-color has-text-color has-background has-link-color wp-elements-f2d04436e041169953b6cd026c323830\"><code>\n&lt;h3>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u4ed8\u304d\u68d2\u30b0\u30e9\u30d5&lt;\/h3>\n  &lt;div class=\"ct-chart ct-golden-section\" style=\"height: 400px;\">&lt;\/div>\n  &lt;script>\n    \/\/ \u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\n    const data = {\n      labels: &#91;'1\u6708', '2\u6708', '3\u6708', '4\u6708', '5\u6708', '6\u6708', '7\u6708', '8\u6708', '9\u6708', '10\u6708', '11\u6708', '12\u6708'],\n      series: &#91;&#91;120, 150, 180, 200, 170, 210, 250, 300, 280, 260, 230, 190]]\n    };\n\n    \/\/ \u30aa\u30d7\u30b7\u30e7\u30f3\u8a2d\u5b9a\n    const options = {\n      axisY: {\n        onlyInteger: true, \/\/ \u6574\u6570\u306e\u307f\u8868\u793a\n        offset: 50, \/\/ \u8ef8\u306e\u30aa\u30d5\u30bb\u30c3\u30c8\n        labelInterpolationFnc: value => `${value}\u4e07\u5186` \/\/ \u30e9\u30d9\u30eb\u306b\u5358\u4f4d\u8ffd\u52a0\n      },\n      chartPadding: {\n        top: 20,\n        right: 20,\n        bottom: 20,\n        left: 20\n      }\n    };\n\n    \/\/ \u30b0\u30e9\u30d5\u63cf\u753b\n    const chart = new Chartist.Bar('.ct-chart', data, options);\n\n    \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a\n    chart.on('draw', function(data) {\n      if (data.type === 'bar') {\n        data.element.animate({\n          y2: {\n            begin: 0, \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u958b\u59cb\u4f4d\u7f6e\n            dur: 1000, \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u6301\u7d9a\u6642\u9593 (ms)\n            from: data.y1, \/\/ \u958b\u59cb\u5024\n            to: data.y2,   \/\/ \u7d42\u4e86\u5024\n            easing: Chartist.Svg.Easing.easeOutBounce \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u30a4\u30fc\u30b8\u30f3\u30b0\n          }\n        });\n      }\n    });\n  &lt;\/script>\n<code>\n<\/code><\/code><\/pre>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u307e\u3068\u3081<\/h2>\n\n\n\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u68d2\u30b0\u30e9\u30d5\u306e\u57fa\u672c\u304b\u3089\u5229\u7528\u30b7\u30fc\u30f3\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u9078\u3073\u65b9\u3001\u305d\u3057\u3066\u304a\u3059\u3059\u3081\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u7279\u5fb4\u3068\u6bd4\u8f03\u8868\u307e\u3067\u3092\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>\u68d2\u30b0\u30e9\u30d5\u306f\u30c7\u30fc\u30bf\u306e\u6bd4\u8f03\u3084\u63a8\u79fb\u3092\u8996\u899a\u7684\u306b\u308f\u304b\u308a\u3084\u3059\u304f\u793a\u3059\u305f\u3081\u306e\u4fbf\u5229\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002\u7528\u9014\u306b\u5fdc\u3058\u3066\u6700\u9069\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u9078\u3073\u3001\u52b9\u679c\u7684\u306a\u30c7\u30fc\u30bf\u53ef\u8996\u5316\u3092\u5b9f\u73fe\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<p>\u6b21\u56de\u306f\u6298\u308c\u7dda\u30b0\u30e9\u30d5\u3084\u5186\u30b0\u30e9\u30d5\u306a\u3069\u3001\u5225\u306e\u30b0\u30e9\u30d5\u5f62\u5f0f\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u306e\u3067\u3001\u305c\u3072\u304a\u697d\u3057\u307f\u306b\uff01<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u3001Web\u30b5\u30a4\u30c8\u3067\u30c7\u30fc\u30bf\u3092\u30b0\u30e9\u30d5\u306b\u3057\u3066\u898b\u305b\u308b\u3053\u3068\u304c\u5897\u3048\u3066\u304d\u307e\u3057\u305f\u3002\u305f\u3068\u3048\u3070\u3001\u4f1a\u793e\u6848\u5185\u30da\u30fc\u30b8\u3067\u58f2\u4e0a\u3084\u696d\u7e3e\u306e\u63a8\u79fb\u3092\u30b0\u30e9\u30d5\u306b\u3057\u3066\u308f\u304b\u308a\u3084\u3059\u304f\u3057\u305f\u308a\u3001\u30a2\u30f3\u30b1\u30fc\u30c8\u7d50\u679c\u3092\u30d3\u30b8\u30e5\u30a2\u30eb\u3067\u793a\u3057\u305f\u308a\u3059\u308b\u4f8b\u304c\u3088\u304f\u3042\u308a\u307e\u3059\u3002\u3053\u3046\u3057\u305f\u30b0\u30e9\u30d5\u306f\u3001 [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":8084,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[13,15],"tags":[22,541,389],"class_list":["post-7982","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-system","tag-javascript","tag-541","tag-389"],"acf":[],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/fastcoding.jp\/blog\/wp-content\/uploads\/2025\/01\/7982barchart.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/7982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/comments?post=7982"}],"version-history":[{"count":95,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/7982\/revisions"}],"predecessor-version":[{"id":8212,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/posts\/7982\/revisions\/8212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media\/8084"}],"wp:attachment":[{"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/media?parent=7982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/categories?post=7982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastcoding.jp\/blog\/wp-json\/wp\/v2\/tags?post=7982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}