{"id":2303,"date":"2023-12-18T22:21:48","date_gmt":"2023-12-18T13:21:48","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=2303"},"modified":"2023-12-19T18:00:04","modified_gmt":"2023-12-19T09:00:04","slug":"blog146","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog146\/","title":{"rendered":"(146) Google Charts\u3067\u68d2\u30b0\u30e9\u30d5\u3068\u5186\u30b0\u30e9\u30d5\u3092\u8868\u793a"},"content":{"rendered":"

1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n

\u8868\u984c\u306e\u901a\u308a\u3002<\/p>\n

2. \u3084\u3063\u3066\u307f\u305f<\/h1>\n

\u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b\u3001\u30b0\u30e9\u30d5\u3092 3\u500b\u4e26\u3079\u3066\u8868\u793a\u3057\u305f\u3002
\nhttps:\/\/www.dogrow.net\/hp\/sample\/00146\/
\n\"\"<\/a><\/p>\n

1) \u5b9f\u88c5\u3057\u305f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\n

(1) index.html<\/h3>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title>Blog No.146<\/title>\r\n  <link rel="stylesheet" href="style.css" \/>\r\n  <script type="text\/javascript" src="https:\/\/www.gstatic.com\/charts\/loader.js"><\/script>\r\n  <script src="script.js"><\/script>\r\n  <script>\r\n  const grpData1 = [\r\n      ['\u8981\u7d20', '\u5024'],\r\n      ['\u306f\u3044', 995],\r\n      ['\u3044\u3044\u3048', 381],\r\n      ['\u3069\u3061\u3089\u3067\u3082\u306a\u3044', 184]\r\n  ];\r\n  const grpData2 = [\r\n      ['\u8981\u7d20', '\u5024'],\r\n      ['\u91d1\u9b5a\u3059\u304f\u3044', 129],\r\n      ['\u8f2a\u6295\u3052', 86],\r\n      ['\u5c04\u7684', 106],\r\n      ['\u308a\u3093\u3054\u98f4', 39],\r\n      ['\u30d3\u30f3\u30b4', 138]\r\n  ];\r\n  const grpData3 = [\r\n      ['\u8981\u7d20', '\u5024'],\r\n      ['\u306f\u3044', 1129],\r\n      ['\u3044\u3044\u3048', 244],\r\n      ['\u3069\u3061\u3089\u3067\u3082\u306a\u3044', 220]\r\n  ];\r\n  google.charts.setOnLoadCallback( drawAllCharts );\r\n  function drawAllCharts(){\r\n    drawBarChart('GQ1', '\u554f1\uff1a\u697d\u3057\u304b\u3063\u305f\u3067\u3059\u304b\uff1f',     grpData1);\r\n    drawPieChart('GQ2', '\u554f2\uff1a\u4f55\u304c\u826f\u304b\u3063\u305f\u3067\u3059\u304b\uff1f',   grpData2);\r\n    drawPieChart('GQ3', '\u554f3\uff1a\u307e\u305f\u53c2\u52a0\u3057\u305f\u3044\u3067\u3059\u304b\uff1f', grpData3);\r\n  }\r\n  <\/script>\r\n<\/head>\r\n<body>\r\n<div id="GQ1" class="chart"><\/div>\r\n<div id="GQ2" class="chart"><\/div>\r\n<div id="GQ3" class="chart"><\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
(2) script.js<\/h3>\n
\u4ee5\u4e0b\u306e\u4e8c\u3064\u306e\u30b0\u30e9\u30d5\u8868\u793a\u95a2\u6570\u3092\u7528\u610f\u3057\u305f\u3002
\ndrawBarChart : \u68d2\u30b0\u30e9\u30d5\u8868\u793a\u95a2\u6570
\ndrawPieChart : \u5186\u30b0\u30e9\u30d5\u8868\u793a\u95a2\u6570<\/p>\n
\u305d\u308c\u305e\u308c\u5f15\u6570\u3067
\n\u30c7\u30fc\u30bf\u3001\u30bf\u30a4\u30c8\u30eb\u6587\u5b57\u5217\u3001\u30b0\u30e9\u30d5\u8868\u793a\u5bfe\u8c61\u306eDOM\u8981\u7d20\u306eID
\n\u3092\u6e21\u3059\u4ed5\u69d8\u3060\u3002<\/p>\n
\r\n\/\/ \u30b0\u30e9\u30d5\u63cf\u753b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30ed\u30fc\u30c9\r\ngoogle.charts.load('current', {'packages':['corechart', 'bar']});\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ \u68d2\u30b0\u30e9\u30d5\u3092\u8868\u793a\r\nfunction drawBarChart( id, titleText, grpData ) {\r\n  const data = google.visualization.arrayToDataTable(grpData);\r\n  const options = {\r\n    title: titleText,\r\n    titleTextStyle: {\r\n      fontSize: 16,      \/\/ \u30bf\u30a4\u30c8\u30eb\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba[px]\r\n      color: '#000000'\r\n    },\r\n    chartArea: {\r\n      left:   '5%',     \/\/ \u5de6\u306e\u4f59\u767d\r\n      top:    '5%',     \/\/ \u4e0a\u306e\u4f59\u767d\r\n      width:  '90%',    \/\/ \u63cf\u753b\u30a8\u30ea\u30a2\u306e\u5e45\r\n      height: '90%'     \/\/ \u63cf\u753b\u30a8\u30ea\u30a2\u306e\u9ad8\u3055\r\n    },\r\n    legend: {           \/\/ \u51e1\u4f8b\r\n      textStyle: {\r\n        fontSize: 16    \/\/ \u51e1\u4f8b\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba[px]\r\n      }\r\n    },\r\n    bars: 'vertical'\r\n  };\r\n  var chart = new google.charts.Bar(document.getElementById(id));\r\n  chart.draw(data, google.charts.Bar.convertOptions(options));\r\n}\r\n\r\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\r\n\/\/ \u5186\u30b0\u30e9\u30d5\u3092\u8868\u793a\r\nfunction drawPieChart( id, titleText, grpData ) {\r\n  const data = google.visualization.arrayToDataTable(grpData);\r\n  const options = {\r\n    title: titleText,\r\n    titleTextStyle: {\r\n      fontSize: 16,      \/\/ \u30bf\u30a4\u30c8\u30eb\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba[px]\r\n      bold: false\r\n    },\r\n    chartArea: {\r\n      left:   '10%',    \/\/ \u5de6\u306e\u4f59\u767d\r\n      top:    '10%',    \/\/ \u4e0a\u306e\u4f59\u767d\r\n      width:  '90%',    \/\/ \u63cf\u753b\u30a8\u30ea\u30a2\u306e\u5e45\r\n      height: '80%'     \/\/ \u63cf\u753b\u30a8\u30ea\u30a2\u306e\u9ad8\u3055\r\n    },\r\n    legend: {           \/\/ \u51e1\u4f8b\r\n      textStyle: {\r\n        fontSize: 16    \/\/ \u51e1\u4f8b\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba[px]\r\n      }\r\n    },\r\n  };\r\n  var chart = new google.visualization.PieChart(document.getElementById(id));\r\n  chart.draw(data, options);\r\n}\r\n<\/pre>\n
(3) style.css<\/h3>\n
\r\n*{\r\n  margin:  0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\nbody{\r\n  padding: 0.5rem;\r\n}\r\ndiv.chart{\r\n  position: relative;\r\n  margin: 0.5rem;\r\n  display: inline-block;\r\n  width:  30rem;\r\n  height: 20rem;\r\n  border: 2px #bbb solid;\r\n}\r\n<\/pre>\n
\n","protected":false},"excerpt":{"rendered":"
1. \u3084\u308a\u305f\u3044\u3053\u3068 \u8868\u984c\u306e\u901a\u308a\u3002 2. \u3084\u3063\u3066\u307f\u305f \u4ee5\u4e0b\u306e\u56f3\u306e\u3088\u3046\u306b\u3001\u30b0\u30e9\u30d5\u3092 3\u500b\u4e26\u3079\u3066\u8868\u793a\u3057\u305f\u3002 https:\/\/www.dogrow.net\/hp\/sample\/00146\/ 1) \u5b9f\u88c5\u3057\u305f\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9 (1) i\u2026 \u7d9a\u304d\u3092\u8aad\u3080 »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-2303","post","type-post","status-publish","format-standard","hentry","category-javascriptjquery"],"views":618,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=2303"}],"version-history":[{"count":12,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2303\/revisions"}],"predecessor-version":[{"id":2319,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/2303\/revisions\/2319"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=2303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=2303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=2303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}