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

阳凌

2023-12-01

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

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

入门

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

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();

有关更多信息，请参见概述，教程和示例。

安装

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

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

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

依存关系

Rickshaw依靠出色的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的3.x分支来运行测试。

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文档）；值得注意的选择：

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

叠

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

方法

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

render（）

绘制或重画图形。

配置（）

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

onUpdate（f）

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

扩展名

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

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 run build或make应该让您走运。

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

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

贡献

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

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

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

s

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

执照

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

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

目录

入门

安装

依存关系

Rickshaw.Graph

方法

扩展名

Rickshaw.Color.Palette

人力车和跨浏览器支持

缩小

发展历程

贡献

s

执照

相关阅读

相关文章

相关问答

相关文档