README

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

入门指南

使用简单图表入门非常简单。以下是概览

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.Graph

一个 Rickshaw 图。在调用 render() 以指向图形之前，向构造函数发送一个 element 引用、series 数据以及可选的其他属性。以下是一些属性的列表。将这些作为构造函数的参数发送，并可选择在已实例化的图形上使用 configure() 调用来设置它们。

element

一个指向应包含图形的 HTML 元素的引用。

series

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

renderer

一个包含要使用的渲染器名称的字符串。选项包括 area、stack、bar、line 和 scatterplot。

width

图形的像素宽度。回退到 element 的宽度，或默认为 400 像素，如果元素没有宽度。

height

图形的像素高度。回退到 element 的高度，或默认为 250 像素，如果元素没有高度。

min

Y 轴上的最低值，或 auto 为系列中的最低值。默认为 0。

max

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

padding

一个对象，包含任何 top、right、bottom 和 left 属性，指定围绕图形数据极值周围的填充百分比。默认为顶部 0.01，其他方面为 0。

interpolation

线平滑/插值方法（见D3 文档）；显著的选项

linear：点之间的直线
step-after：点之间的正方形步骤
cardinal：通过卡丹样条进行平滑曲线（默认）
basis：通过 B 样条进行平滑曲线

方法

实例化图形后，调用以下方法以获取屏幕上的像素、更改配置和设置回调。

render()

绘制或重新绘制图形。

configure()

在实例化图形上设置属性。指定构造函数接受的任何属性，包括 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.Axis.Time - 添加带有时间标签的x轴和网格线
Rickshaw.Graph.Axis.X - 添加任意标签的x轴和网格线
Rickshaw.Graph.Axis.Y - 添加y轴和网格线
Rickshaw.Graph.Behavior.Series.Highlight - 在图例悬停时突出显示系列
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...

配色方案

classic9
colorwheel
cool
munin
spectrum14
spectrum2000
spectrum2001

插值

对于比调色板颜色多的图表，将interpolatedStopCount指定给调色板构造函数。

Rickshaw和跨浏览器支持

此库在现代浏览器和Internet Explorer 9中运行。

Rickshaw依赖于HTMLElement#classList API，该API在Internet Explorer 9中未原生支持。Rickshaw通过包括一个实现classList API的shim来扩展HTMLElement原型来添加支持。您可以通过在包含库之前将RICKSHAW_NO_COMPAT设置为true值来禁用此行为。

依赖项和构建

Rickshaw依赖于出色的D3可视化库来完成堆叠和渲染到SVG的大部分工作。

一些扩展需要jQuery和jQuery UI，但绘制一些基本图表时无需这些。

对于构建，我们需要Node和npm。运行make可能让您开始。

构建后，可以使用命令：npm test运行测试。

贡献

欢迎拉取请求！请遵循以下一些指南

请勿包括rickshaw.js和rickshaw.min.js的更新版本。只需更改源文件即可。
添加一个单元测试或两个来覆盖拟议的更改
遵循罗马人的做法，坚持现有的空白和格式约定（例如，使用制表符而不是空格等）
考虑在examples/下添加一个简单的示例，以展示任何新功能

作者

此库由David Chester、Douglas Hunter和Silas Sewell在Shutterstock开发。

许可证

特此免费授予任何获得此软件和相关文档副本（“软件”）的人权，在不受限制的情况下处理该软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许向获得软件的人提供软件副本以执行上述操作，但须遵守以下条件

shutterstock / rickshaw

维护者

详细信息