Rickshaw是一个JavaScript工具箱，用于创建交互式时间序列图

忘是亡心i 2023-10-05 14:23 9阅读 0赞

Rickshaw是一个JavaScript工具箱，用于创建交互式时间序列图，由[Shutterstock][]开发

graylog中的搜索直方图使用了Rickshaw

### 目录 ###

*  [入门][Link 1]
 *  [安装][Link 2]
    
     *  [依存关系][Link 3]
 *  [Rickshaw.Graph][] \-[元素][Link 4] \-[系列][Link 5] \-[渲染器][Link 6] \-[宽度][Link 7] \-[高度][Link 8] \-[分钟][Link 9] \-[最大][Link 10] \-[填充][Link 11] \-[插值][Link 12] \-[堆][Link 13]
    
     *  [方法][Link 14]
        
         *  [render（）][render]
         *  [配置（）][Link 15]
         *  [onUpdate（f）][onUpdate_f]
 *  [扩展名][Link 16]
 *  [人力车彩色调色板][Link 17]
    
     *  [配色方案][Link 18]
     *  [插补][Link 12]
 *  [人力车和跨浏览器支持][Link 19]
 *  [缩小][Link 20]
 *  [发展历程][Link 21]
 *  [贡献][Link 22]
 *  [s][]
 *  [执照][Link 23]

### 入门 ###

简单图形入门非常简单。这是要点：

var graph = new Rickshaw.Graph( {
      element: document.querySelector('#graph'),
      series: [
        {
          color: 'steelblue',
          data: [ { x: 0, y: 23}, { x: 1, y: 15 }, { x: 2, y: 79 } ]
        }, {
          color: 'lightblue',
          data: [ { x: 0, y: 30}, { x: 1, y: 20 }, { x: 2, y: 64 } ]
        }
      ]
    } );
    
    graph.render();

有关[更多信息][Link 24]，请参见[概述][Link 24]，[教程][Link 25]和[示例][Link 26]。

### 安装 ###

在浏览器中，手动添加`rickshaw.min.js`并`rickshaw.min.css`在文档标题中。

另外，您可以使用[Bower][]或[npm][]安装Rickshaw 。

# With bower
    bower install rickshaw
    # With npm
    npm install --save rickshaw

#### 依存关系 ####

Rickshaw依靠出色的[D3可视化库][D3]来完成很多繁重的工作，以进行堆栈和渲染到SVG。

有些扩展需要[jQuery][]和[jQuery UI][]，但是如果要绘制一些基本图形，您可以不用。

Rickshaw使用[jsdom][]在Node中运行单元测试，以便能够执行SVG操作。从jsdom 7.0.0版本开始，jsdom需要Node.js 4或更新的[jsdom changelog][]。如果要在计算机上运行测试，并且无权访问节点> = 4.0的版本，则`npm install jsdom@3` 可以使用[jsdom][jsdom 1]的[3.x分支][jsdom 1]来运行测试。

### Rickshaw.Graph ###

Rickshaw 图。在调用指向图之前，将`element`引用，`series`数据以及其他可选属性发送给构造函数`render()`。属性列表如下。将这些参数作为参数发送给构造函数，并在以后通过调用来在已实例化的图形上进行设置（可选）`configure()`

元件

对应该包含图形的HTML元素的引用。

系列

包含要绘制的系列数据的对象数组。每个对象`data`至少应包含一个具有x和y属性的对象排序数组。也可以选择发送`name`和`color`。一些渲染器和扩展程序可能还支持其他键。

渲染器

一个字符串，其中包含要使用的渲染器的名称。选项包括`area`，`stack`，`bar`，`line`，和`scatterplot`。默认为`line`。另请参阅`multi`元渲染器，以支持每个系列使用不同的渲染器。

宽度

图形的宽度（以像素为单位）。退回到的宽度，`element`如果元素没有宽度，则默认为400。

高度

图形的高度（以像素为单位）。退回到的高度，`element`如果元素没有高度，则默认为250。

分

Y轴上的较低值，或`auto`系列中的最低值。预设为0。

最高

Y轴上的最大值。默认为系列中的最大值。

填充

含有任何的目的`top`，`right`，`bottom`，和`left`属性指定围绕图中的数据的极值的填充百分比。对于1％的填充，顶部默认为0.01，另一侧默认为0。底部的填充仅在`yMin`负数或时适用`auto`。

插补

线平滑/插值方法（请参阅[D3文档][D3 1]）；值得注意的选择：

*  `linear`：点之间的直线
 *  `step-after`：从点到点的平方步长
 *  `cardinal`：通过基本样条曲线平滑曲线（默认）
 *  `basis`：通过B样条曲线平滑

叠

允许您指定在堆叠渲染器（区域，条形图等）的上下文中是否应堆叠系列。默认为`stack: 'true'`。要取消堆叠，`unstack: 'true'`。

#### 方法 ####

实例化图表后，请调用以下方法在屏幕上获取像素，更改配置并设置回调。

render（）

绘制或重画图形。

配置（）

在实例化图上设置属性。指定构造函数接受的任何属性，包括`width`和`height`和`renderer`。调用`render()`以重绘图形并反映新配置的属性。

onUpdate（f）

添加一个回调以在渲染图形时运行

### 扩展名 ###

有了基本图形后，扩展即可让您添加功能。有关[更多信息][Link 24]，请参见[概述][Link 24]和[示例][Link 26]列表。

*  **Rickshaw.Graph.Legend-**添加基本图例
 *  **Rickshaw.Graph.HoverDetail-**显示有关悬停的详细信息
 *  **Rickshaw.Graph.JSONP-**通过JSONP请求获取数据
 *  **Rickshaw.Graph.Annotate-**添加X轴注释
 *  **Rickshaw.Graph.RangeSlider-**使用滑块在X轴上动态缩放
 *  **Rickshaw.Graph.RangeSlider.Preview-**通过整个数据集的图形预览进行平移和缩放
 *  **Rickshaw.Graph.Axis.Time-**添加带有时间标签的x轴和网格线
 *  **Rickshaw.Graph.Axis.X-**添加带有任意标签的x轴和网格线
 *  **Rickshaw.Graph.Axis.Y-**添加y轴和网格线
 *  **Rickshaw.Graph.Axis.Y.Scaled-**添加带有替代比例的y轴
 *  **人力车。图形。行为**。系列。重点-图例悬停时的突出显示系列
 *  **Rickshaw.Graph.Behavior.Series.Order-**通过拖放对堆栈中的系列进行重新排序
 *  **Rickshaw.Graph.Behavior.Series.Toggle-**通过图例打开和关闭系列

### Rickshaw.Color.Palette ###

Rickshaw带有一些配色方案。实例化一个调色板并指定一个方案名称，然后在调色板上调用color（）以获取每种下一种颜色。

var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );
    
    palette.color() // => first color in the palette
    palette.color() // => next color in the palette...

可选地，对palette.color（）可以采用数字参数来指定应使用调色板中的哪种颜色（零索引）。将颜色分配给具有特定含义的图系列时，这将很有帮助：

var palette = new Rickshaw.Color.Palette( { scheme: 'colorwheel' } );
    
    palette.color(0) // => first color in the palette - red in this example
    palette.color(2) // => third color in the palette - light blue

配色方案

*  经典9
 *  色轮
 *  凉
 *  慕宁
 *  频谱14
 *  Spectrum2000
 *  Spectrum2001

插补

对于具有更多系列而不是调色板具有颜色的图形，请`interpolatedStopCount`为调色板构造函数指定一个。

### 人力车和跨浏览器支持 ###

该库可在现代浏览器和Internet Explorer 9+中运行。

Rickshaw依赖于HTMLElement＃classList API，Internet Explorer 9本身不支持该API。Rickshaw通过添加垫片来增加支持，该垫片通过扩展HTMLElement原型来实现classList API。如果愿意，可以通过`RICKSHAW_NO_COMPAT`在包含库之前将其设置为true来禁用此行为。

### 缩小 ###

如果你的项目使用微小，你需要给的提示，minifier离开命名变量`$super`命名`$super`。例如，在命令行上使用uglify：

$ uglify-js --reserved-names "$super" rickshaw.js > rickshaw.min.js

或使用以下示例配置`grunt-contrib-uglify`：

uglify: {
      options: {
        mangle: { except: ["$super"] }
      }
    }

### 发展历程 ###

对于构建，我们使用[Node][]和[npm][npm 1]。运行`npm run build`或`make`应该让您走运。

完成构建后，您可以使用以下命令运行测试： `npm test`

有关更多可用选项，请参见[package.json][]脚本部分。

### 贡献 ###

始终欢迎请求请求！请遵循一些准则：

*  请不要包含的更新版本`rickshaw.js`和`rickshaw.min.js`。只需对源文件进行更改就足够了。
 *  添加一两个单元测试以涵盖建议的更改
 *  像罗马人一样做，并坚持使用现有的空白和格式约定（即，制表符而不是空格等）
 *  考虑在下面添加一个简单示例`examples/`演示任何新功能

请注意，与Shutterstock的所有互动均遵循《[贡献者行为守则》][Link 27]。

### s ###

该库是由[Shutterstock上的][Shutterstock]David Chester，Douglas Hunter和Silas Sewell开发的

### 执照 ###

特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，包括但不限于使用，复制，修改，合并的权利，发布，分发，再许可和/或出售本软件的副本，并允许具备软件的人员这样做，但须满足以下条件：

[Shutterstock]: http://www.shutterstock.com/
[Link 1]: https://github.com/shutterstock/rickshaw#getting-started
[Link 2]: https://github.com/shutterstock/rickshaw#install
[Link 3]: https://github.com/shutterstock/rickshaw#dependencies
[Rickshaw.Graph]: https://github.com/shutterstock/rickshaw#rickshawgraph
[Link 4]: https://github.com/shutterstock/rickshaw#element
[Link 5]: https://github.com/shutterstock/rickshaw#series
[Link 6]: https://github.com/shutterstock/rickshaw#renderer
[Link 7]: https://github.com/shutterstock/rickshaw#width
[Link 8]: https://github.com/shutterstock/rickshaw#height
[Link 9]: https://github.com/shutterstock/rickshaw#min
[Link 10]: https://github.com/shutterstock/rickshaw#max
[Link 11]: https://github.com/shutterstock/rickshaw#padding
[Link 12]: https://github.com/shutterstock/rickshaw#interpolation
[Link 13]: https://github.com/shutterstock/rickshaw#stack
[Link 14]: https://github.com/shutterstock/rickshaw#methods
[render]: https://github.com/shutterstock/rickshaw#render
[Link 15]: https://github.com/shutterstock/rickshaw#configure
[onUpdate_f]: https://github.com/shutterstock/rickshaw#onupdatef
[Link 16]: https://github.com/shutterstock/rickshaw#extensions
[Link 17]: https://github.com/shutterstock/rickshaw#rickshawcolorpalette
[Link 18]: https://github.com/shutterstock/rickshaw#color-schemes
[Link 19]: https://github.com/shutterstock/rickshaw#rickshaw-and-cross-browser-support
[Link 20]: https://github.com/shutterstock/rickshaw#minification
[Link 21]: https://github.com/shutterstock/rickshaw#development
[Link 22]: https://github.com/shutterstock/rickshaw#contributing
[s]: https://github.com/shutterstock/rickshaw#authors
[Link 23]: https://github.com/shutterstock/rickshaw#license
[Link 24]: https://shutterstock.github.io/rickshaw/
[Link 25]: http://shutterstock.github.com/rickshaw/tutorial/introduction.html
[Link 26]: http://shutterstock.github.com/rickshaw/examples/
[Bower]: https://bower.io/
[npm]: https://npmjs.com/
[D3]: http://mbostock.github.com/d3/
[jQuery]: http://jquery.com/
[jQuery UI]: http://jqueryui.com/
[jsdom]: https://github.com/tmpvar/jsdom
[jsdom changelog]: https://github.com/tmpvar/jsdom/blob/master/Changelog.md#700
[jsdom 1]: https://github.com/tmpvar/jsdom/tree/3.x
[D3 1]: https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate
[Node]: http://nodejs.org/
[npm 1]: http://npmjs.org/
[package.json]: https://github.com/shutterstock/rickshaw/blob/master/package.json
[Link 27]: https://github.com/shutterstock/rickshaw/blob/master/CODE_OF_CONDUCT.md