一、 涉及技術(shù)
1. React
2. D3
二、 功能需求
1. 用react-stockcharts(github:https://github.com/rrag/react-stockcharts,示例:https://rrag.github.io/react-stockcharts/)在網(wǎng)頁(yè)上面繪制K線圖,要求多幅圖實(shí)現(xiàn)聯(lián)動(dòng)功能,包括鼠標(biāo)事件的移動(dòng)、拖動(dòng)、上滑放大、下滑縮小的K線基本操作。
2. 增加鍵盤(pán)上、下、左、右方向箭頭事件,實(shí)現(xiàn)移動(dòng)、放大、縮小的K線基本操作。
3. 其中鼠標(biāo)移動(dòng)如http://echarts.baidu.com/echarts2/doc/example/mix8.html#所示,但是還包括鼠標(biāo)事件的移動(dòng)、拖動(dòng)、上滑放大、下滑縮小的K線基本操作,即react-stockcharts本身支持的K線操作鼠標(biāo)事件。鍵盤(pán)事件類似。
4. 聯(lián)動(dòng),是指一個(gè)頁(yè)面內(nèi)多幅K線圖的聯(lián)動(dòng),多幅K線圖在頁(yè)面內(nèi)是任意放置的。在一幅圖中鼠標(biāo)位于某一天,則在其余圖中,日期也應(yīng)該相同。在一幅圖中拖動(dòng)、放大、縮小時(shí),其余圖的操作行為也是相同的。
三、 非功能需求
1. PC瀏覽器支持:Chrome、FireFox,不要求支持手機(jī)。
2. 對(duì)react-stockcharts本身操作性能無(wú)卡頓影響。
3. 程序代碼上面可參照ECharts的Connect方法,在使用上方便定義,簡(jiǎn)單便捷。
四、 驗(yàn)收標(biāo)準(zhǔn)
1. 提交代碼、代碼注釋、使用說(shuō)明、示例。
2. 以頁(yè)面https://rrag.github.io/react-stockcharts/documentation.html#/moving_average的K線圖,在一個(gè)頁(yè)面內(nèi)包括2~16幅K線圖,實(shí)現(xiàn)二、三要求的功能。
3. 協(xié)助集成和安裝。