{"id":1496,"date":"2025-03-20T15:04:50","date_gmt":"2025-03-20T06:04:50","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/?post_type=route&p=1496"},"modified":"2025-08-20T15:06:40","modified_gmt":"2025-08-20T06:06:40","slug":"chart-js%e3%81%a7%e6%8f%8f%e7%94%bb%e3%81%8c%e6%ae%8b%e3%82%8b%e5%95%8f%e9%a1%8c%e3%82%923%e5%88%86%e3%81%a7%e5%8d%b3%e8%a7%a3%e6%b1%ba%ef%bc%81%e5%8e%9f%e5%9b%a0%e3%81%a8%e5%af%be%e5%87%a6","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/1496\/","title":{"rendered":"Chart.js\u3067\u63cf\u753b\u304c\u6b8b\u308b\u554f\u984c\u30923\u5206\u3067\u5373\u89e3\u6c7a\uff01\u539f\u56e0\u3068\u5bfe\u51e6"},"content":{"rendered":"
\n

\u300c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u30b0\u30e9\u30d5\u3092\u52d5\u304b\u3057\u3066\u3044\u308b\u3068\u3001\u53e4\u3044\u70b9\u304c\u6d88\u3048\u306a\u3044\u30fb\u63cf\u753b\u304c\u91cd\u306a\u308b\u30fb\u623b\u3063\u305f\u3089\u4e8c\u91cd\u8868\u793a\u2026\u300d\u2500\u2500\u3053\u306e\u73fe\u8c61\u306e\u591a\u304f\u306f\u2460\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u91cd\u8907\u2461\u30c7\u30fc\u30bf\u914d\u5217\u306e\u672a\u7ba1\u7406\u2462\u30bf\u30a4\u30de\u30fc\uff0fWebSocket\u306e\u505c\u6b62\u6f0f\u308c<\/strong>\u304c\u539f\u56e0\u3067\u3059\u3002\u307e\u305a\u306f\u3053\u308c\u3092\u30b3\u30d4\u30da\u3057\u3066\u8a66\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n

<canvas id=\"chart\"><\/canvas>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<script>\r\nconst ctx = document.getElementById('chart').getContext('2d');\r\nlet chart = new Chart(ctx, { type: 'line', data: { labels: [], datasets: [{ label: 'v', data: [] }] }, options: { animation: false }});\r\n\r\nfunction addPoint(x,y){\r\n  chart.data.labels.push(x);\r\n  chart.data.datasets[0].data.push(y);\r\n  if(chart.data.labels.length>60){\r\n    chart.data.labels.shift();\r\n    chart.data.datasets[0].data.shift();\r\n  }\r\n  chart.update('none');\r\n}\r\n\r\nfunction cleanup(){\r\n  if(chart){ chart.destroy(); chart = null; }\r\n  \/\/ clearInterval \/ websocket close \u3092\u3053\u3053\u3067\u5fc5\u305a\u547c\u3076\r\n}\r\n<\/script><\/code><\/pre>\n
\n
\u554f\u984c\u3092\u518d\u73fe\u3059\u308b\u6700\u5c0f\u30b5\u30f3\u30d7\u30eb\uff08\u30cf\u30f3\u30ba\u30aa\u30f3\uff09<\/h2>\n
\u307e\u305a\u306f\u6700\u5c0f\u4f8b\u3067\u73fe\u8c61\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002setInterval\u3067\u30c7\u30fc\u30bf\u3092push\u3057\u7d9a\u3051\u308b\u3068\u3001shift\u3092\u5165\u308c\u3066\u3044\u306a\u3044\u3068\u70b9\u304c\u5897\u3048\u7d9a\u3051\u3001\u63cf\u753b\u304c\u91cd\u304f\u306a\u3063\u305f\u308a\u898b\u305f\u76ee\u304c\u5d29\u308c\u307e\u3059\u3002WebSocket\u518d\u63a5\u7d9a\u6642\u306b\u30cf\u30f3\u30c9\u30e9\u3092\u4e8c\u91cd\u767b\u9332\u3059\u308b\u3068\u30011\u30c7\u30fc\u30bf\u304c2\u56de\u8ffd\u52a0\u3055\u308c\u308b\u3053\u3068\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n
\n
\u539f\u56e0\u5225\u8a3a\u65ad\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8\uff08\u307e\u305a\u3053\u308c\u3092\u78ba\u8a8d\uff09<\/h2>\n
    \n
  1. \u540c\u4e00canvas\u306b\u8907\u6570\u306eChart\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u5b58\u5728\u3057\u306a\u3044\u304b<\/strong>\uff08console.log\u3067\u78ba\u8a8d\uff09<\/li>\n
  2. labels\/datasets[].data\u306e\u9577\u3055\u7ba1\u7406<\/strong>\uff08\u4e0a\u9650\u3092\u8a2d\u3051\u3066\u3044\u308b\u304b\uff09<\/li>\n
  3. setInterval\/requestAnimationFrame\/WebSocket\u306e\u89e3\u9664\u6f0f\u308c<\/strong><\/li>\n
  4. chart.update\u306e\u30e2\u30fc\u30c9\uff08\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6709\u7121\uff09<\/strong><\/li>\n
  5. streaming\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3069\u306e\u505c\u6b62\u51e6\u7406<\/strong><\/li>\n<\/ol>\n
    \n
    \u539f\u56e0\u5225\u306e\u8a73\u3057\u3044\u5bfe\u51e6\u6cd5\uff08\u30b3\u30fc\u30c9\uff0b\u8aac\u660e\uff09<\/h2>\n
    \u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u91cd\u8907\u2192chart.destroy()\u3092\u4f7f\u3046<\/h3>\n
    Chart\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u518d\u751f\u6210\u3059\u308b\u524d\u306b\u5fc5\u305achart.destroy()\u3092\u547c\u3073\u3001\u53e4\u3044\u30ea\u30bd\u30fc\u30b9\u3092\u89e3\u653e\u3057\u307e\u3059\u3002\u518d\u751f\u6210\u3088\u308a\u7834\u68c4\u3057\u3066\u518d\u5229\u7528\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<\/p>\n
    \u30c7\u30fc\u30bf\u304c\u6e9c\u307e\u308b\u2192\u30ea\u30f3\u30b0\u30d0\u30c3\u30d5\u30a1\u6226\u7565<\/h3>\n
    \u914d\u5217\u3092\u7121\u9650\u306b\u5897\u3084\u3055\u306a\u3044\u3088\u3046\u306bif(len>MAX)shift()\u3092\u5165\u308c\u3001\u53ef\u8996\u70b9\u6570\u3092\u56fa\u5b9a\u3057\u307e\u3059\u3002<\/p>\n
    \u30bf\u30a4\u30de\u30fc\/WS\u306e\u591a\u91cd\u767b\u9332\u2192\u767b\u9332\uff0f\u89e3\u9664\u30d1\u30bf\u30fc\u30f3<\/h3>\n
    React\u306euseEffect\u3084Vue\u306ebeforeUnmount\u3067\u5fc5\u305aclearInterval\/socket.close()\u3092\u547c\u3076\u30c6\u30f3\u30d7\u30ec\u3092\u5f8c\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u6b8b\u50cf\u2192chart.update(‘none’)\/animation:false<\/h3>\n
    \u983b\u7e41\u306b\u66f4\u65b0\u3059\u308b\u306a\u3089\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5207\u308a\u3001chart.update(‘none’)\u3067\u5373\u6642\u5dee\u5206\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n
    plugin\u5229\u7528\u6642\u306e\u505c\u6b62\uff08\u4f8b\uff1achartjs-plugin-streaming\uff09<\/h3>\n
    \u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u7279\u6709\u306e\u505c\u6b62API\u304c\u3042\u308c\u3070\u4f7f\u3044\u3001\u6700\u5f8c\u306fchart.destroy()\u3092\u5fd8\u308c\u305a\u306b\u3002<\/p>\n
    \n
    \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u5225\u306e\u5b9f\u88c5\u6ce8\u610f\u70b9\uff08\u4f8b\uff1aReact\uff09<\/h2>\n
    React\uff08\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff09\u4f8b\uff1a<\/strong><\/p>\n
    useEffect(()=>{\r\n  const ctx = canvasRef.current.getContext('2d');\r\n  const chart = new Chart(ctx, {...});\r\n  const id = setInterval(()=> addPoint(...),1000);\r\n  return ()=>{\r\n    clearInterval(id);\r\n    chart.destroy();\r\n  }\r\n},[]);<\/code><\/pre>\n
    \u30dd\u30a4\u30f3\u30c8\u306fcleanup\u3067\u30bf\u30a4\u30de\u30fc\u505c\u6b62+chart.destroy()<\/strong>\u3092\u5fc5\u305a\u884c\u3046\u3053\u3068\u3002<\/p>\n
    \n
    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\uff06\u904b\u7528\uff08\u518d\u767a\u4e88\u9632\uff09<\/h2>\n