Canvasã§è¶…å¯æ„›ã„グラフãŒä½œã‚Œã‚‹!「Chart.jsã€ã®ç´¹ä»‹ | æ ªå¼ä¼šç¤¾LIGã“ã‚“ã«ã¡ã¯ã€‚デザイナーã®ãƒãƒ«ã‚¨ã§ã™ã€‚ 最近ã¡ã‚‡ãã¡ã‚‡ãグラフを用ã„ãŸåˆ¶ä½œç‰©ã«é–¢ã‚ã‚‹ã“ã¨ãŒã‚ã‚Šã€æ¡ˆä»¶ã«ã‚ˆã£ã¦ã¯ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã•ã‚“ã«ãŠé¡˜ã„ã—ãŸã‚ŠIllustratorã®ã‚°ãƒ©ãƒ•ãƒ„ールã§ä½œã£ãŸã‚Šã—ã¦ã„ãŸã®ã§ã™ãŒã€ãªã‚“ã‚„ã‹ã‚“ã‚„ã§æ™‚é–“ã¨ã‚‰ã‚Œã¡ã‚ƒã†ã‚“ã§ã™ã‚ˆã。ã§ã€ã‚‚ã£ã¨ã“ã†ã‚ªã‚·ãƒ£ãƒ¬ã§ã‚¹ãƒžãƒ¼ãƒˆã«ã•ãã£ã¨ãƒã‚¤ãƒ†ãƒ³ã‚·ãƒ§ãƒ³ã§ä½œã‚Œã‚‹ã‚‚ã®ã¯ãªã„ã‹ã¨æŽ¢ã—ã¦ã¿ã¾ã—ãŸã€‚ ãã“ã§è¦‹ã¤ã‘ãŸã®ãŒã“れ。「Chart.jsã€ã€‚ ã‚ã¡ã‚ƒãã¡ã‚ƒæ„›ãã‚‹ã—ã„å‹•ãã‚’ã—ã¦ãã‚Œã¾ã™ã€‚デザインもフラットã§ã„ã„ï¼ ãƒãƒ¼ãƒˆãƒ•ã‚©ãƒªã‚ªã‚„プレゼンãªã‚“ã‹ã«ã‚‚ãã£ã¨å½¹ç«‹ã¡ã¾ã™ã‚ˆã€‚ Chart.jsã¨ã¯ï¼Ÿ 折れ線グラフã€æ£’グラフã€å††ã‚°ãƒ©ãƒ•ã€ãƒ¬ãƒ¼ãƒ€ãƒ¼ãƒãƒ£ãƒ¼ãƒˆãªã©ã€6種類ã®ã‚°ãƒ©ãƒ•ãŒç°¡å˜ã«æã‘ã¦ã—ã¾ã†Javascriptã®ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ HTML5ã®Canvasを使ã£ã¦æç”»ã•ã‚Œã€è¡¨ç¤ºã®éš›ã®æ°—æŒã¡ã„ã„アニメーションã®å‹•ããŒç‰¹å¾´çš„ã§ã™ã€‚ã¨ã¦ã‚‚分ã‹ã‚Šã‚„ã™ã„マークアップãªã®
{{#tags}}- {{label}}
{{/tags}}