{"id":102,"date":"2021-11-15T09:30:00","date_gmt":"2021-11-15T00:30:00","guid":{"rendered":"https:\/\/www.miracleave.co.jp\/contents\/?p=102"},"modified":"2023-05-23T12:40:44","modified_gmt":"2023-05-23T03:40:44","slug":"chartjs-processing-data","status":"publish","type":"post","link":"https:\/\/www.miracleave.co.jp\/contents\/102\/chartjs-processing-data\/","title":{"rendered":"\u3010Js\u30fbvue.js\u3011char.js\u3067\u306e\u30c7\u30fc\u30bf\u52a0\u5de5\u306e\u3084\u308a\u65b9"},"content":{"rendered":"\n<div class=\"wp-block-cocoon-blocks-icon-box common-icon-box block-box information-box\">\n\n<p>\u8a18\u4e8b\u4f5c\u6210\u304b\u30891\u5e74\u4ee5\u4e0a\u7d4c\u904e\u3057\u3066\u3044\u307e\u3059\u3002<br>\u5185\u5bb9\u304c\u53e4\u3044\u53ef\u80fd\u6027\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n\n<\/div>\n\n\n\n<p><br>\u3053\u3093\u306b\u3061\u306f\uff01<br>\u500b\u4eba\u7684\u306b\u958b\u767a\u3057\u3066\u3044\u308bvuejs \u00d7 rails api\u306e\u30a2\u30d7\u30ea\u306b\u3066\u30b0\u30e9\u30d5\u3092\u4f7f\u3063\u305f\u30c7\u30fc\u30bf\u8868\u793a\u3092\u5b9f\u88c5\u3057\u305f\u6642\u306b\u8e93\u3044\u305f\u30dd\u30a4\u30f3\u30c8\u304c\u3042\u3063\u305f\u306e\u3067\u8a18\u4e8b\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u74b0\u5883<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rails 5.2.3<\/li>\n\n\n\n<li>rails 5.2.3<\/li>\n\n\n\n<li>vue.js 2.6.12<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u53c2\u8003<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/swallow-incubate.com\/archives\/blog\/20191023\/\">\u3010Javascript\u3011\u914d\u5217(\u30aa\u30d6\u30b8\u30a7\u30af\u30c8)\u306e\u64cd\u4f5c\u3010map\/filter\/some\/reduce\u3011<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/shinya131-note.hatenablog.jp\/entry\/2015\/06\/18\/212025\">ActiveRecord\u3067\u65e5\u4ed8\u3054\u3068\u306bgroup by\u3057\u305f\u3044<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/railsguides.jp\/active_record_querying.html#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97\">Rails\u30ac\u30a4\u30c9<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u8e93\u3044\u305f\u30dd\u30a4\u30f3\u30c8<\/h2>\n\n\n\n<p><code>chart.js<\/code>\u306e\u4f7f\u3044\u65b9\u306f\u53c2\u8003\u8a18\u4e8b\u304c\u305f\u304f\u3055\u3093\u3042\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u300c\u3058\u3083\u3042\u52d5\u7684\u306b\u30c7\u30fc\u30bf\u53d6\u5f97\u3059\u308b\u6642\u306b\u3069\u3046\u3084\u3063\u3066\u30b0\u30e9\u30d5\u306b\u6e21\u3059\u306e\uff1f\u300d\u3063\u3066\u306a\u308a\u3001\u306a\u304b\u306a\u304b\u53c2\u8003\u8a18\u4e8b\u304c\u898b\u3064\u304b\u3089\u305a\u306b\u82e6\u52b4\u3057\u305f\u306e\u3067\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b8c\u6210<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"295\" height=\"517\" src=\"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2021\/11\/image.png\" alt=\"\" class=\"wp-image-562\" srcset=\"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2021\/11\/image.png 295w, https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2021\/11\/image-171x300.png 171w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/figure>\n\n\n\n<p>\u3053\u308c\u304c<code>chart.js<\/code>\u3092\u4f7f\u3063\u3066\u8868\u793a\u3057\u3066\u3044\u308b\u68d2\u30b0\u30e9\u30d5\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u3084\u308a\u305f\u3044\u4e8b<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1\u9031\u9593\u306e\u5b66\u7fd2\u6642\u9593\u3092DB\u304b\u3089\u53d6\u5f97\u3002<\/li>\n\n\n\n<li>1\u65e5\u306b\u8907\u6570\u306e\u5b66\u7fd2\u6642\u9593\u3092\u767b\u9332\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u5408\u8a08\u3057\u30661\u3064\u306e\u9023\u60f3\u914d\u5217\u306b\u307e\u3068\u3081\u308b\u3002<\/li>\n\n\n\n<li>\u5b66\u7fd2\u6642\u9593\u3092\u767b\u9332\u3057\u3066\u3044\u306a\u3044\u65e5\u306f\u5b66\u7fd2\u6642\u9593\u30920\u3068\u3059\u308b\u3002<\/li>\n\n\n\n<li>\u6700\u7d42\u7684\u306b\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092<code>chart.js<\/code>\u306b\u6e21\u3057\u3066\u68d2\u30b0\u30e9\u30d5\u3092\u8868\u793a\u3059\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u306f\u3058\u3081\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u5f97<\/h2>\n\n\n\n<p>\u6b32\u3057\u3044\u30c7\u30fc\u30bf\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30c7\u30fc\u30bf\u3067\u3059<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>[\n  {&quot;id&quot;:9,&quot;time&quot;:1.5,&quot;user_id&quot;:1,&quot;created_at&quot;:&quot;2021-01-25T12:00:00.000+09:00&quot;,&quot;day_of_week&quot;:1},\n  {&quot;id&quot;:11,&quot;time&quot;:2.0,&quot;user_id&quot;:1,&quot;created_at&quot;:&quot;2021-01-27T09:39:30.000+09:00&quot;,&quot;day_of_week&quot;:3},\n  {&quot;id&quot;:14,&quot;time&quot;:0.5,&quot;user_id&quot;:1,&quot;created_at&quot;:&quot;2021-01-28T07:52:24.000+09:00&quot;,&quot;day_of_week&quot;:4}\n]<\/code><\/pre><\/div>\n\n\n\n<p>rails\u306eactiveRecord\u3092\u4f7f\u3063\u3066\u53d6\u5f97\u3057\u307e\u3059\u3002<br>\u307e\u305a\u4eca\u9031\u306e\u65e5\u301c\u571f\u3067\u671f\u9593\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ruby\" data-lang=\"Ruby\"><code># models\/study.rb\ndef self.get_week_chart_data\n@this_day = Time.now\n@range = @this_day.all_week(:sunday)\nself.where(created_at: @range)\nend<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u3067created_at\u304c\u4eca\u9031<code>2021\/01\/24~2021\/01\/30<\/code>\u3067\u671f\u9593\u304c\u6307\u5b9a\u3067\u304d\u307e\u3059<br>\u6b21\u306b\u30d5\u30ed\u30f3\u30c8\u3067\u4f7f\u3046\u30c7\u30fc\u30bf\u3092\u6307\u5b9a\u3057\u3066\u53d6\u5f97\u3057\u307e\u3059<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ruby\" data-lang=\"Ruby\"><code>def self.get_week_chart_data\n@this_day = Time.now\n@range = @this_day.all_week(:sunday)\nself.where(created_at: @range)\n.select(:id, &quot;sum(time) as time&quot;, :user_id, :created_at, &quot;dayofweek(created_at) - 1 as day_of_week&quot;)\nend<\/code><\/pre><\/div>\n\n\n\n<p>\u4e0d\u8981\u306a\u30c7\u30fc\u30bf\u3082\u53d6\u3063\u3066\u304d\u3066\u307e\u3059\u304c\u6c17\u306b\u3057\u306a\u3044\u7b11<br>\u30dd\u30a4\u30f3\u30c8\u306f\u3001<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>sum(time) as time<\/code>\u3068\u3057\u30661\u65e5\u306b\u8907\u6570\u56de\u306e\u5b66\u7fd2\u6642\u9593(time)\u3092\u767b\u9332\u3057\u3066\u3044\u308b\u5834\u5408\u3082\u3042\u308b\u306e\u3067\u3001\u305d\u306e\u5408\u8a08\u5024\u3092\u53d6\u5f97\u3059\u308b\u3002<\/li>\n\n\n\n<li><code>dayofweek(created_at) -1 as day_of_week<\/code>\u3092\u4f7f\u3063\u3066\u66dc\u65e5\uff08\u3053\u306e\u5834\u5408\u306f\u66dc\u65e5\u306e\u6dfb\u5b57\u3067\u3042\u308b0~6\uff09\u3092\u53d6\u5f97\u3059\u308b\u3002<\/li>\n<\/ul>\n\n\n\n<p>mysql\u3060\u3068<code>dayofweek<\/code>\u3067\u53d6\u5f97\u3067\u304d\u308b\u6dfb\u5b57\u304c1~7\u306b\u306a\u308b\u306e\u3067\u6ce8\u610f\u3002<br>Js\u3067\u306f<code>getDay()<\/code>\u3092\u4f7f\u3046\u30680~6\u304c\u53d6\u5f97\u3067\u304d\u308b\u3002<br>\u306a\u3093\u304b\u63c3\u3063\u3066\u306a\u3044\u306e\u304c\u6c17\u306b\u306a\u308b\u306e\u3067<code>-1<\/code>\u3057\u3066\u63c3\u3048\u3066\u3044\u308b\u3060\u3051\u3002<\/p>\n\n\n\n<p>\u6700\u5f8c\u306b\u65e5\u4ed8\u3054\u3068\u306b\u307e\u3068\u3081\u308b\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ruby\" data-lang=\"Ruby\"><code>def self.get_week_chart_data\n@this_day = Time.now\n@range = @this_day.all_week(:sunday)\nself.where(created_at: @range)\n.select(:id, &quot;sum(time) as time&quot;, :user_id, :created_at, &quot;dayofweek(created_at) - 1 as day_of_week&quot;)\n.group(&quot;date(created_at)&quot;)\nend<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u3067\u66dc\u65e5\u3054\u3068\u306b\u30b0\u30eb\u30fc\u30d7\u5316\u3067\u304d\u305f\u306e\u3067\u5f53\u521d\u53d6\u5f97\u3057\u305f\u304b\u3063\u305f\u30c7\u30fc\u30bf\u304c\u53d6\u5f97\u3067\u304d\u308b\u3002<br>\u3053\u306e\u30e2\u30c7\u30eb\u30e1\u30bd\u30c3\u30c9\u3092\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306b\u6e21\u3059. \u3064\u3044\u3067\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3082\u8a2d\u5b9a\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ruby\" data-lang=\"Ruby\"><code># controllers\/studies_controller.rb\ndef history\nhistories = current_user.studies.get_week_chart_data \/\/ current_user\u306e\u8aac\u660e\u306f\u306f\u3057\u3087\u308a\u307e\u3059. \u3059\u3044\u307e\u305b\u3093\uff01\nrender json: histories\nend\n\n# config\/routes.rb\nnamespace :api, {format: &#39;json&#39;} do\nnamespace :v1 do\nget &#39;histories&#39;, controller: :studies, action: :history \/\/ RESTful\u3058\u3083\u306a\u3044\u306e\u306f\u8a31\u3057\u3066\nend\nend<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u672c\u984c<\/h2>\n\n\n\n<p>\u3053\u308c\u3067\u4e0b\u6e96\u5099\u304c\u5b8c\u4e86. chart.js\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code># components\/Chart.vue\n# \u3053\u308c\u306f\u516c\u5f0f\u306e\u66f8\u304d\u65b9\u306e\u307e\u307e\n&lt;script&gt;\nimport { Bar, mixins } from &#39;vue-chartjs&#39;;\nconst { reactiveProp } = mixins\n\nexport default {\n  extends: Bar,\n  mixins: [reactiveProp], \/\/ reactiveProp\u4f7f\u308f\u306a\u3044\u3068\u30c7\u30fc\u30bf\u66f4\u65b0\u3067\u304d\u306a\u3044\u306e\u3067\u6ce8\u610f\n  props: [&#39;options&#39;],\n  mounted () {\n    this.renderChart(this.chartData, this.options)\n  }\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>#History.vue\n&lt;template&gt;\n&lt;div&gt;\n&lt;Chart class=&quot;chart&quot; v-if=&quot;loaded&quot; :chartData=&quot;chartData&quot; :options=&quot;options&quot;\/&gt;\n&lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport Chart from &#39;..\/components\/Chart&#39;;\n\nexport default {\ncomponents: {\nChart\n},\ndata() {\nhistories: [],\nloaded: false,\nchartData: { labels: [], datasets: [] }, \/\/ \u3053\u308c\u304cchart.js\u306e\u30c7\u30fc\u30bf\u306e\u5b9a\u7fa9\noptions: {\n\/\/ \u3053\u3053\u306e\u66f8\u304d\u65b9\u306f\u30b0\u30b0\u308b\u3068\u305f\u304f\u3055\u3093\u51fa\u3066\u304f\u308b\u306e\u3067\u7701\u7565\n}\n},\nmounted () {\nthis.$http.secured.get(&#39;\/api\/v1\/histories&#39;)\n.then(response =&gt; {\nthis.histories = response.data\nthis.fillData()\n\/\/ \u30a8\u30e9\u30fc\u51e6\u7406\u306f\u7701\u7565\n},\nmethods: {\n\/\/ \u3053\u3053\u3067chart\u306b\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u51e6\u7406\u66f8\u304d\u307e\u3059\nfillData () {\nthis.loaded = false\nvar data = this.arrayData() \/\/ \u3053\u3053\u3067\u30c7\u30fc\u30bf\u3092\u52a0\u5de5\u3059\u308b\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\nthis.chartData = {\nlabels: [&#39;Sun&#39;, &#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;],\ndatasets: [{ data: data }] \/\/ \u914d\u5217\u306e\u5f62\u3067\u30c7\u30fc\u30bf\u3092\u6e21\u3059\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\n}\nthis.loaded = true\n}\n}\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u3067\u5148\u7a0bapi\u3067\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092chart\u306b\u6e21\u305b\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br>\u305f\u3060\u3001\u307e\u3060json\u30c7\u30fc\u30bf\u3092\u52a0\u5de5\u3057\u3066\u306a\u3044\u306e\u3067<code>arrayData()<\/code>\u30e1\u30bd\u30c3\u30c9\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<br><code>datasets:[{ data: }]<\/code>\u306b\u6e21\u3059\u6642\u306f\u914d\u5217\u306b\u3057\u3066\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u307e\u3059\u3002<br>\u306a\u306e\u3067\u3001json\u3067\u306f\u9023\u60f3\u914d\u5217\u3092\u914d\u5217\u306b\u307e\u3068\u3081\u305f\u5f62\u3067\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u3063\u3066\u3044\u308b\u306e\u3067map\u3092\u4f7f\u3063\u3066\u914d\u5217\u306b\u52a0\u5de5\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-ruby\" data-lang=\"Ruby\"><code>~\u7701\u7565~\nmethods: {\narrayData () {\nvar getData = this.histories;\nconst times = getData.map(item =&gt; item.time)\nreturn times\n}\n~\u7701\u7565~\n}<\/code><\/pre><\/div>\n\n\n\n<p>map\u306f\u9023\u60f3\u914d\u5217\u306e\u30ad\u30fc\u3092\u6307\u5b9a\u3059\u308b\u4e8b\u3067value\u3060\u3051\u53d6\u308a\u51fa\u3057\u3066\u30eb\u30fc\u30d7\u51e6\u7406\u3057\u914d\u5217\u3092\u4f5c\u3063\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>const times = getData.map(item =&gt; item.time)\nconsole.log(times)\n=&gt; [1.5, 2.0, 0.5]<\/code><\/pre><\/div>\n\n\n\n<p>\u3042\u308c\uff1f<br>\u672c\u6765\u306e\u30c7\u30fc\u30bf\u901a\u308a\u3060\u3068<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>1\/25(\u6708) =&gt; 1.5\n1\/27(\u6c34)=&gt; 2.0\n1\/28(\u6728)=&gt; 0.5<\/code><\/pre><\/div>\n\n\n\n<p>\u306b\u306a\u3089\u306a\u3051\u308c\u3070\u3044\u3051\u306a\u3044\u306e\u306b\u3001map\u3067\u4f5c\u3063\u305f\u30c7\u30fc\u30bf\u3067\u306f<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>1\/24(\u65e5) =&gt; 1.5\n1\/25(\u6708) =&gt; 2.0\n1\/26(\u706b) =&gt; 0.5<\/code><\/pre><\/div>\n\n\n\n<p>\u306b\u306a\u3063\u3061\u3083\u3063\u3066\u307e\u3059\u3002<br>\u78ba\u304b\u306b\u914d\u5217\u30c7\u30fc\u30bf\u3092\u4f5c\u308c\u305f\u306e\u3067<code>datasets:[{ data: }]<\/code>\u306b\u6e21\u305b\u308b\u30c7\u30fc\u30bf\u306b\u3067\u304d\u307e\u3057\u305f\u304c\u30011\u9031\u9593\u306f7\u65e5\u306a\u306e\u3067\u3001\u3053\u308c\u3060\u3068\u65e5\u30fb\u6708\u30fb\u706b\u306e\u30c7\u30fc\u30bf\u306b\u306a\u3063\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u2026\u3002<\/p>\n\n\n\n<p>\u73fe\u72b6\u306e\u72b6\u614b\u3092\u307e\u3068\u3081\u308b\u3068\u3001<br><code>[0, 1.5, 0, 0.5, 0, 0, 0]<\/code>\u3068\u3044\u3046\u914d\u5217\u3092\u4f5c\u3089\u306a\u304f\u3066\u306f\u3044\u3051\u306a\u3044\u306e\u306b\u3001<code>[1.5, 2.0, 0.5]<\/code>\u3068\u3044\u3046\u914d\u5217\u304c\u3067\u304d\u3066\u3044\u308b\u72b6\u614b\u3067\u3059\u3002<br>map\u3067\u4f5c\u3063\u305f\u914d\u5217\u306findex[0]\u304b\u3089\u5024\u3092\u57cb\u3081\u3066\u3044\u304f\u306e\u3067\u30013\u3064\u306e\u9023\u60f3\u914d\u5217\u304b\u3089\u53d6\u308a\u51fa\u3057\u305f\u30d7\u30ed\u30d1\u30c6\u30a3\u306findex[0]~[2]\u306b\u8a70\u3081\u3066\u30bb\u30c3\u30c8\u3055\u308c\u3066\u3057\u307e\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u554f\u984c\u3092\u89e3\u6d88\u3059\u308b\u70ba\u306b\u3084\u308a\u305f\u3044\u4e8b\u306e3\u3064\u76ee<code>\u5b66\u7fd2\u6642\u9593\u3092\u767b\u9332\u3057\u3066\u3044\u306a\u3044\u65e5\u306f\u5b66\u7fd2\u6642\u9593\u30920\u3068\u3059\u308b<\/code>\u51e6\u7406\u3092arrayData()\u30e1\u30bd\u30c3\u30c9\u306b\u66f8\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u8003\u3048\u65b9<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>(A) json\u30c7\u30fc\u30bf\u306e<code>day_of_week<\/code>\u3092\u4f7f\u3063\u3066\u6bd4\u8f03\u7528\u306e\u914d\u5217\u3092\u4f5c\u6210\u3059\u308b\u3002<\/li>\n\n\n\n<li>(B) 1\u9031\u9593\u306f7\u65e5\u306a\u306e\u3067\u6bd4\u8f03\u5bfe\u8c61\u306e\u914d\u5217\u3092\u7528\u610f\u3059\u308b\u3002<\/li>\n\n\n\n<li>(A)\u3068(B)\u3092\u6bd4\u8f03\u3057\u3066(A)\u304c\u6301\u3063\u3066\u3044\u306a\u3044\u6570\u5b57(\u66dc\u65e5)\u3092\u6c42\u3081\u308b\u3002<\/li>\n\n\n\n<li>\u6301\u3063\u3066\u3044\u306a\u3044\u6570\u5b57(\u66dc\u65e5)\u756a\u76ee\u306b<code>{ time: 0 }<\/code>\u3092\u7a81\u3063\u8fbc\u3093\u3067\u3084\u308b\uff08\u7121\u7406\u3084\u308a\u611f\u2026\uff09<\/li>\n<\/ul>\n\n\n\n<p>\u679c\u305f\u3057\u3066\u3053\u308c\u304c\u826f\u3044\u3084\u308a\u65b9\u306a\u306e\u304b\u306f\u751a\u3060\u7591\u554f\u3060\u304c\u3001\u3084\u3063\u3066\u307f\u3088\u3046\uff01<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u30c7\u30fc\u30bf\u306e\u6210\u5f62<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>~\u7701\u7565~\nmethods: {\narrayData () {\nvar getData = this.histories;\n\/\/ getData\u306e\u9023\u60f3\u914d\u5217\u6570\u304c7\u3064\u672a\u6e80\u306e\u5834\u5408\nif(getData.length &lt; 7) {\n\/\/ (A)\u6bd4\u8f03\u7528\u306e\u914d\u5217\u3092\u4f5c\u6210\u3059\u308b\n\/\/ \u5404\u9023\u60f3\u914d\u5217created_at\u306e\u66dc\u65e5(\u6dfb\u5b57)\u3092\u62bd\u51fa\u3057\u3066\u914d\u5217\u3092\u4f5c\u6210\nconst arrayDayOfWeek = getData.map(item =&gt; item.day_of_week)\n=&gt; [1, 3, 4]\n\n\/\/ (B)\u6bd4\u8f03\u5bfe\u8c61\u306e\u914d\u5217\u3092\u7528\u610f\u3059\u308b\n\/\/ 1\u9031\u95937\u65e5\u5206\u306e\u66dc\u65e5(\u6dfb\u5b57)\u306e\u6570\u5024\u3092\u683c\u7d0d\u3057\u305f\u914d\u5217\u3092\u4f5c\u6210\nconst arraySeven = [0, 1, 2, 3, 4, 5, 6]\n\n\/\/ (A)\u3068(B)\u3092\u6bd4\u8f03\u3057\u3066\u5dee\u5206\u3092\u6c42\u3081\u308b\n\/\/ filter\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066\u3001arrayDay0fWeek\u304c\u6301\u3063\u3066\u3044\u306a\u3044\u5024\u3092\u62bd\u51fa\nvar resultArray = arraySeven.filter(i =&gt; arrayDayOfWeek.indexOf(i) == -1)\n=&gt; [0, 2, 5, 6]\u304cresultArray\u306b\u683c\u7d0d\n\n\/\/ \u3053\u306e\u30b1\u30fc\u30b9\u3060\u3068resultArray\u306b\u306f4\u3064\u30c7\u30fc\u30bf\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u306e\u30674\u56de\u30eb\u30fc\u30d7\u3055\u308c\u308b\n\/\/ splice\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u3063\u3066getData\u306e\u914d\u5217\u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b[0, 2, 5, 6]\u756a\u76ee\u306b{time: 0}\u3092\u8ffd\u52a0\nfor(var i = 0; i &lt; resultArray.length; i++) {\ngetData.splice(resultArray[i], 0, {time: 0})\n};\n\u2193\n\u7d50\u679c\n\u2193\n\/\/ \u914d\u5217index\u756a\u53f7\u306e0, 2, 5, 6\u756a\u76ee\u306b{time: 0}\u304c\u8ffd\u52a0\u3055\u308c\u305f(\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u6570\u304c\u9055\u3046\u306e\u306f\u6c17\u306b\u3057\u306a\u3044)\n\/\/\ngetData =\n[ {time: 0}\n{id: 9, time: 1.5, user_id: 1, created_at: &quot;2021-01-25T12:00:00.000+09:00&quot;, day_of_week: 1}\n{time: 0}\n{id: 11, time: 2, user_id: 1, created_at: &quot;2021-01-27T09:39:30.000+09:00&quot;, day_of_week: 3}\n{id: 14, time: 0.5, user_id: 1, created_at: &quot;2021-01-28T07:52:24.000+09:00&quot;, day_of_week: 4}\n{time: 0}\n{time: 0} ]\n\/\/\n}\n\nconst times = getData.map(item =&gt; item.time)\nreturn times\n\/\/ chart\u306b\u6e21\u3057\u305f\u3044\u914d\u5217\u3092\u4f5c\u6210\u3067\u304d\u305f\n=&gt; [0, 1.5, 0, 0.5, 0, 0, 0]\n}\n~\u7701\u7565~\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>for(var i = 0; i &lt; resultArray.length; i++) {\ngetData.splice(resultArray[i], 0, {time: 0})\n};<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u306e\u51e6\u7406\u3067\u306f\u3001<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>resultArray[0]\n=&gt; \u914d\u52170\u756a\u76ee\u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u5024\u306f[0]\ngetData0\u756a\u76ee\u306bsplice\u30e1\u30bd\u30c3\u30c9\u306b\u3088\u3063\u3066{time: 0}\u304c\u8ffd\u52a0\nresultArray[1]\n=&gt; \u914d\u52171\u756a\u76ee\u306b\u683c\u7d0d\u3055\u308c\u3066\u3044\u308b\u5024\u306f[2]\ngetData2\u756a\u76ee\u306bsplice\u30e1\u30bd\u30c3\u30c9\u306b\u3088\u3063\u3066{time: 0}\u304c\u8ffd\u52a0<\/code><\/pre><\/div>\n\n\n\n<p>\u3092\u30eb\u30fc\u30d7\u51e6\u7406\u3067<code>resultArray.length<\/code>\u5206\u3001\u7e70\u308a\u8fd4\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u308c\u3067\u76ee\u7684\u306e\u30c7\u30fc\u30bf\u306e\u6210\u5f62\u304c\u5b8c\u4e86\u3057\u305f\u306e\u3067chart\u306b\u6e21\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">chart.js\u306b\u6210\u5f62\u3057\u305f\u30c7\u30fc\u30bf\u3092\u6e21\u3059<\/h3>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>\/\/ \u5fc5\u8981\u7b87\u6240\u3060\u3051\n&lt;template&gt;\n&lt;div&gt;\n&lt;Chart class=&quot;chart&quot; v-if=&quot;loaded&quot; :chartData=&quot;chartData&quot; :options=&quot;options&quot;\/&gt;\n=&gt; chartData\u306bfillData\u30e1\u30bd\u30c3\u30c9\u3067\u751f\u6210\u3055\u308c\u305f\u30c7\u30fc\u30bf\u304c\u6e21\u3055\u308c\u308b\n=&gt; options\u306bdata() {}\u5185\u3067\u5b9a\u7fa9\u3057\u305foptions\u30c7\u30fc\u30bf\u3092\u6e21\u305b\u308b\uff08\u3053\u306e\u8a18\u4e8b\u3067\u306f\u7701\u7565\u3057\u3066\u307e\u3059\uff09\n&lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\ndata() {\nhistories: [],\nloaded: false,\nchartData: { labels: [], datasets: [] },\n},\nmounted() {\nthis.$http.secured.get(&#39;\/api\/v1\/histories&#39;)\n.then(response =&gt; {\nthis.histories = response.data \/\/json\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b\nthis.fillData() \/\/ fillData\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3059\n})\n},\nmethods: {\narrayData () {\n~\u7701\u7565~\nreturn times \/\/ \u8fd4\u308a\u5024 =&gt; [0, 1.5, 0, 0.5, 0, 0, 0]\n},\nfillData () {\nthis.loaded = false\nvar data = this.arrayData() \/\/ [0, 1.5, 0, 0.5, 0, 0, 0]\u3092data\u306b\u683c\u7d0d\nthis.chartData = {\nlabels: [&#39;Sun&#39;, &#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;],\ndatasets: [ { data: data } ]\n} \/\/ data() {}\u5185\u3067\u5b9a\u7fa9\u3057\u305fchartData { labels: [], datasets: [] }\u306b\u751f\u6210\u3057\u305f\u30c7\u30fc\u30bf\u304c\u683c\u7d0d\u3055\u308c, template\u30bf\u30b0\u5185\u306e&lt;Chart ~~\/&gt;\u3078\u30de\u30a6\u30f3\u30c8\u3055\u308c\u308b\nthis.loaded = true\n}\n},\n}\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p>\u3053\u308c\u3067\u8a18\u4e8b\u306e\u6700\u521d\u306b\u8cbc\u3063\u305f\u30ad\u30e3\u30d7\u30c1\u30e3\u306e\u68d2\u30b0\u30e9\u30d5\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6700\u5f8c\u306b<\/h3>\n\n\n\n<p>\u3082\u3063\u3068\u52b9\u7387\u7684\u306a\u66f8\u304d\u65b9\u3042\u308c\u3070\u6559\u3048\u3066\u4e0b\u3055\u3044\uff01<br>\u3061\u306a\u307f\u306b\u3001<code>dayofweek()<\/code>\u306fmysql\u3067\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30e1\u30bd\u30c3\u30c9\u306a\u306e\u3067postgresql\u3060\u3068\u30a8\u30e9\u30fc\u3057\u307e\u3059\u2026\u3002<br>heroku\u3067\u30c7\u30d7\u30ed\u30a4\u3057\u305f\u3089\u30a8\u30e9\u30fc\u3067\u840e\u3048\u307e\u3057\u305f\u2026\u3002<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">\u304a\u308f\u308a<\/h5>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\uff01\u500b\u4eba\u7684\u306b\u958b\u767a\u3057\u3066\u3044\u308bvuejs \u00d7 rails api\u306e\u30a2\u30d7\u30ea\u306b\u3066\u30b0\u30e9\u30d5\u3092\u4f7f\u3063\u305f\u30c7\u30fc\u30bf\u8868\u793a\u3092\u5b9f\u88c5\u3057\u305f\u6642\u306b\u8e93\u3044\u305f\u30dd\u30a4\u30f3\u30c8\u304c\u3042\u3063\u305f\u306e\u3067\u8a18\u4e8b\u306b\u3057\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u74b0\u5883 \u53c2\u8003 \u8e93\u3044\u305f\u30dd\u30a4\u30f3\u30c8 chart.js\u306e\u4f7f\u3044\u65b9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":563,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"swell_btn_cv_data":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[81,80,72,79],"class_list":["post-102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-chart-js","tag-javascript","tag-ruby-on-rails","tag-vue-js"],"jetpack_featured_media_url":"https:\/\/www.miracleave.co.jp\/contents\/wp-content\/uploads\/2021\/11\/char.js-\u30c7\u30fc\u30bf\u52a0\u5de5\u306e\u3084\u308a\u65b9.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":5,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":2423,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/posts\/102\/revisions\/2423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/media\/563"}],"wp:attachment":[{"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.miracleave.co.jp\/contents\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}