…L@d…Û3È@X K"Y^ÒšTy"È¡a"²*µöz½0uü°êN(x`¶X@¿xYDFpP',S$wjó ± àAqœBéj=¾õZ«D-NrÞG óåï³(,ä”habFÚÎFê ›M Y ŧbid}ddates2023-06-03T23:55:00etitlexzc3-esã€D3ベースã®ã‚­ãƒ¬ã‚¤ãªã‚°ãƒ©ãƒ•è¡¨ç¤ºãƒ©ã‚¤ãƒ–ラリC3.jsã‚’ESモジュール化ã—ã¦ã‚¨ãƒ¬ã‚¬ãƒ³ãƒˆã«ä½¿ã†dtagsi#js #denocurlxhttps://fukuno.jig.jp/3965dbodyy › データをã„ã„æ„Ÿã˜ã«è¡¨ç¤ºã™ã‚‹ã‚ªãƒ¼ãƒ—ンソースãªãƒ©ã‚¤ãƒ–ラリ探索。「Comparison of JavaScript charting libraries - Wikipediaã€ã§è¦‹ã¤ã‘ãŸã€C3.js。


「C3.js | D3-based reusable chart libraryã€
å…¬å¼ã‚µã‚¤ãƒˆã‚‚ステキã§ã„ã„æ„Ÿã˜ã€‚最終更新ãŒ2020å¹´8月ã¨ãã“ãã“æ–°ã—ã„。GitHubを見るã¨Star9,300ã¨ãªã‹ãªã‹ã®äººæ°—ï¼ä¾å­˜ãƒ©ã‚¤ãƒ–ラリã¯D3.jsã®ã¿ã¨æ§‹æˆã‚‚シンプルã§ã„ã„。

プログラムã¯TypeScriptã§æ›¸ã‹ã‚Œã¦ãŠã‚Šã€ESモジュールã¨ã—ã¦ç”Ÿæˆã•ã‚ŒãŸ c3.esm.js ã¯ã€ãã®ã¾ã¾ãƒ–ラウザã‹ã‚‰ã‚¤ãƒ³ãƒãƒ¼ãƒˆã—ã¦ã‚‚å‹•ã‹ãšã€‚windowオブジェクト㮠SVGPathElement ãªã©ã‚’使ã£ã¦ã„ã‚‹ã“ã¨ãŒåˆ†ã‹ã£ãŸã®ã§ã€åˆæœŸåŒ–メソッドinitC3ã§å›²ã¿ã€ã¤ã„ã§ã«CSSも読ã¿è¾¼ã‚€å½¢ã«å¾Œå‡¦ç†ã§ç”Ÿæˆã™ã‚‹Deno用JavaScriptプログラム make_c3-es.js を追加ã—ã¦å¯¾å¿œã€‚D3ã¯æœ€æ–°ã®v7ã§ã¯ãªãã€v5ã§ä½œã‚‰ã‚Œã¦ã„る。

下記ã®ã‚ˆã†ãªHTMLを書ãã ã‘ã§ã€ã‚°ãƒ©ãƒ•è¡¨ç¤ºã§ãるよã†ã«ãªã‚Šã¾ã—ãŸã€‚ <div id="chart"></div> <script type="module"> import { initC3 } from "https://code4fukui.github.io/c3-es/c3-es.js"; const c3 = initC3(window); const chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ] } }); </script> デモサイトã§ã‚‚確èªã§ãã¾ã™ã€‚


「demo - c3-es forked C3.jsã€


「c3-es forked C3.js src on GitHubã€
使ã„æ–¹ã¯ã€C3.jsãã®ã¾ã¾ã§ã™ã€‚多数ã®ã‚µãƒ³ãƒ—ルやã€å…¬å¼ãƒªãƒ•ã‚¡ãƒ¬ãƒ³ã‚¹ã‚’å‚考ã«ã€ã„ã‚ã‚“ãªãƒ‡ãƒ¼ã‚¿ã‚’ビジュアライズã—ã¦ã¿ã¾ã—ょã†ï¼
cimgxKhttps://img.sabae.cc/data/20230604/09b6284e-f26e-4fda-b5e3-4129080a61d5.jpg