圖表時(shí)間選擇插件
現(xiàn)有時(shí)呈圖在展示時(shí)候選擇和切換時(shí)間范圍不是很方便醋闭，優(yōu)化目標(biāo)減少甚至取消時(shí)間選擇框的使用师溅。
根據(jù)需求篩選了幾個(gè)現(xiàn)有插件：
[if !supportLists]1.?[endif]D3圖表插件
?https://github.com/codesuki/react-d3-components#other-charts
[if !supportLists]2.?[endif]G2插件 （https://antv.alipay.com/index.html）
G2(The Grammar Of Graphics) 是螞蟻金服開源項(xiàng)目抑进，是一個(gè)由純 javascript 編寫克饶、強(qiáng)大的語義化圖表生成工具桃熄，它提供了一整套圖形語法粤策，可以讓用戶通過簡單的語法搭建出無數(shù)種圖表，并且集成了大量的統(tǒng)計(jì)工具琐旁，支持多種坐標(biāo)系繪制涮阔，可以讓用戶自由得定制圖表，是為大數(shù)據(jù)時(shí)代而準(zhǔn)備的強(qiáng)大的可視化工具灰殴。
在react中使用g2
通過npm安裝：
npm install g2 --save
npm install g2-react --save
使用：
優(yōu)點(diǎn)：橫軸slider組件敬特，可以方便的查看某一時(shí)間范圍的圖表數(shù)據(jù)，同時(shí)也方便切換。
效果圖：
G2插件也提供了南丁格爾玫瑰圖：
[if !supportLists]3.?[endif]Highstock ?(https://www.hcharts.cn/demo/highstock )
????Highstock 是用純 JavaScript 編寫的股票圖表控件伟阔，可以開發(fā)大數(shù)據(jù)量的時(shí)間軸圖表辣之。它包含多個(gè)高級(jí)導(dǎo)航組件：預(yù)設(shè)置數(shù)據(jù)時(shí)間范圍，日期選擇器皱炉、滾動(dòng)條怀估、平移、縮放功能娃承。
安裝：
Highstock 是完全包含 Highcharts的奏夫，所以沒必要將兩個(gè)文件都引用，
var?Highcharts = require('highcharts/highstock');
使用：
import ?Highcharts from ‘highcharts/highstock’
var chart = Highcharts.stockCharts()
優(yōu)點(diǎn)：
時(shí)間范圍選擇器历筝、滾動(dòng)條和導(dǎo)航器
1.時(shí)間范圍選擇器：
在處理大數(shù)據(jù)集時(shí)酗昼，我們可能需要查看不同時(shí)間范圍的數(shù)據(jù)。Highstock 提供了范圍選擇器梳猪，方便的用它來選擇預(yù)設(shè)范圍的時(shí)間麻削，例如 1個(gè)月、一季度春弥、1年等呛哟，你可以通過時(shí)間輸入框來選擇自己想要查看數(shù)據(jù)范圍。
2. 滾動(dòng)條和導(dǎo)航器
通過滾動(dòng)條和導(dǎo)航器可以更加直觀的操作和查看特定范圍的數(shù)據(jù)匿沛。
圖表示例：
