{"id":604,"date":"2021-06-25T20:47:22","date_gmt":"2021-06-25T11:47:22","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=604"},"modified":"2021-07-12T07:18:54","modified_gmt":"2021-07-11T22:18:54","slug":"chart-js%e3%81%ae3-x-%e7%b3%bb%e3%81%af-2-x-%e7%b3%bb%e3%81%a8%e8%89%b2%e3%80%85%e4%bb%95%e6%a7%98%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8b","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=604","title":{"rendered":"chart.js\u3067\u51e1\u4f8b\u304c\u975e\u8868\u793a\u306e\u3001\u6298\u308c\u7dda\u3068\u68d2\u304b\u3089\u306a\u308b\u3001\uff12\u8ef8\u306e\u30b0\u30e9\u30d5\u3092\u63cf\u304f"},"content":{"rendered":"<p>chart.js\u306e3.x \u7cfb\u306f 2.x \u7cfb\u3068\u4ed5\u69d8\u304c\u5909\u308f\u3063\u3066\u3044\u308b<\/p>\n<p class=\"has-text-align-left\">version 3.3.2<br \/>chart.js\u306edocument\u306f\u3001\u76f8\u5909\u308f\u3089\u305a\u8a2d\u5b9a\u306e\u968e\u5c64\u304c\u5206\u304b\u308a\u306b\u304f\u3044\u3002<\/p>\n<pre>\r\n let config = {\r\n        labels: chart_labels,\r\n        datasets: [\r\n               {\r\n                        type: 'line',\r\n                        label: '\u91d1\u984d',\r\n                        data: line_Data,\r\n                        steppedLine: false,\r\n                        borderColor: 'rgba(54, 162, 235, 1)',\r\n                        fill : false,\r\n                        yAxisID: \"y_left\" \/\/\uff59\u8ef8\u306eID1\r\n\r\n               },{\r\n                        type : 'bar',\r\n                        label : '\u8acb\u6c42\u66f8\u6570',\r\n                        data: bar_Data,\r\n                        borderColor: 'pink',\r\n                        borderWidth: 2,\r\n                        backgroundColor: 'rgba(252, 217, 236, 0.5)',\r\n                        yAxisID: \"y_right\"\/\/\uff59\u8ef8\u306eID2\r\n                }\r\n         ],\r\n }\r\n\r\n let option =  {\r\n         responsive: true,\r\n         plugins: {\r\n               legend : {\/\/ \u51e1\u4f8b\u306e\u975e\u8868\u793a\r\n                        display : false\r\n                 }\r\n         },\r\n         scales: {\r\n                 y_left:{\/\/\uff59\u8ef8\u306eID1\r\n                       type: \"linear\", \r\n                       position: \"left\", \/\/\uff59\u8ef8\u3092\u5de6\u5074\u306b\u8868\u793a\r\n                 },\r\n                 y_right:{\/\/\uff59\u8ef8\u306eID2\r\n                 \u3000\u3000\u3000type: \"linear\",\r\n                       position: \"right\",\/\/\uff59\u8ef8\u3092\u53f3\u5074\u306b\u8868\u793a\r\n                       grid: { \/\/ grid\u3092\u8868\u793a\u3057\u306a\u3044\r\n                             drawOnChartArea: false\r\n                       }\r\n                },\r\n                y: { \/\/\uff59\u8ef8\u306e\u30b9\u30b1\u30fc\u30eb\r\n                       min: 0,\r\n                }\r\n         },\r\n }\r\n\r\n this.chart = new Chart(this.ctx, {\r\n         data: config,\r\n         options: option\r\n });\r\n<\/pre>\n<p>npm\u3067\u306echart.js\u306einstall<\/p>\n<pre>\r\n# npm install chart.js\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>chart.js\u306e3.x \u7cfb\u306f 2.x \u7cfb\u3068\u4ed5\u69d8\u304c\u5909\u308f\u3063\u3066\u3044\u308b version 3.3.2chart.js\u306edocument\u306f\u3001\u76f8\u5909\u308f\u3089\u305a\u8a2d\u5b9a\u306e\u968e\u5c64\u304c\u5206\u304b\u308a\u306b\u304f\u3044\u3002 let config = { labels: char&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/604"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=604"}],"version-history":[{"count":24,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/604\/revisions"}],"predecessor-version":[{"id":686,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/604\/revisions\/686"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}