图表时间选择插件

图表时间选择插件

现有时呈图在展示时候选择和切换时间范围不是很方便，优化目标减少甚至取消时间选择框的使用。

根据需求筛选了几个现有插件：

[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) 是蚂蚁金服开源项目，是一个由纯 javascript 编写、强大的语义化图表生成工具，它提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由得定制图表，是为大数据时代而准备的强大的可视化工具。

在react中使用g2

通过npm安装：

npm install g2 --save

npm install g2-react --save

使用：

优点：横轴slider组件，可以方便的查看某一时间范围的图表数据，同时也方便切换。

效果图：

G2插件也提供了南丁格尔玫瑰图：

[if !supportLists]3. [endif]Highstock  (https://www.hcharts.cn/demo/highstock )

    Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

安装：

Highstock 是完全包含 Highcharts的，所以没必要将两个文件都引用，

var Highcharts = require('highcharts/highstock');

使用：

import  Highcharts from ‘highcharts/highstock’

var chart = Highcharts.stockCharts()

优点：

时间范围选择器、滚动条和导航器

1.时间范围选择器：

在处理大数据集时，我们可能需要查看不同时间范围的数据。Highstock 提供了范围选择器，方便的用它来选择预设范围的时间，例如 1个月、一季度、1年等，你可以通过时间输入框来选择自己想要查看数据范围。

2. 滚动条和导航器

通过滚动条和导航器可以更加直观的操作和查看特定范围的数据。

图表示例：