Vue.jsã§D3.jsを使ã‚ãšã«ã‚°ãƒ©ãƒ•ã‚’実装ã™ã‚‹ - QiitaVue.jsã§ã‚°ãƒ©ãƒ• を実装ã™ã‚‹ã‚µãƒ³ãƒ—ルコードを探ã™ã¨D3.jsを用ã„ã¦ã„る例ãŒçµæ§‹è¦‹ã¤ã‹ã‚Šã¾ã™ã€‚ ã—ã‹ã—本当ã«D3.jsãŒå¿…è¦ãªã®ã§ã—ょã†ã‹ï¼Ÿ ã“ã®è¨˜äº‹ã§ã¯D3.jsã‚„ãã®ä»–グラフライブラリを用ã„ãšã«Vue.jsã®ã¿ã§å®Ÿè£…ã—ãŸã‚°ãƒ©ãƒ•ã«ã¤ã„ã¦è§£èª¬ã—ã¾ã™ã€‚ TL;DR SVGã§ãŠï½‹ グラフコンãƒãƒ¼ãƒãƒ³ãƒˆã«SVGã®ãƒ†ãƒ³ãƒ—レートを書ã テンプレートã«å¿…è¦ãªå€¤ã‚’ computed ã§ã˜ã‚ƒã‚“ã˜ã‚ƒã‚“作る デモã¨ãƒªãƒã‚¸ãƒˆãƒª デモ： https://haribote.github.io/vue-graph-demo/ リãƒã‚¸ãƒˆãƒª: https://github.com/haribote/vue-graph-demo 折れ線グラフã€æ£’グラフã€å††ã‚°ãƒ©ãƒ•ã€ã®3ã¤ã®ã‚°ãƒ©ãƒ•ã‚’実装ã—ã¦ã¿ã¾ã—ãŸã€‚ データã®å†…容ã¯ãƒ—ãƒé‡Žçƒã«ãŠã‘ã‚‹ç›´è¿‘5シーズンã®å¹´é–“å…¥å ´è€…æ•°ã§ã™ã€‚ NPBãŒå…¬é–‹ã—ã¦ã„る統計データã‹ã‚‰JSONを用æ„ã—ã¾ã—ãŸ
{{#tags}}- {{label}}
{{/tags}}