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。有关按系列支持不同渲染器的 multi 元渲染器，请参阅。

width

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

height

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

min

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

max

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

padding

包含任何 top、right、bottom 和 left 属性的对象，指定围绕图表中数据的极值的填充百分比。默认为顶部 0.01，其他方面为 0。底部填充仅当 yMin 为负或 auto 时适用。

interpolation

线平滑/插值方法（请参阅 D3 文档）；值得注意的选项

linear：点之间的直线
step-after：从点到点的方形步进
cardinal：通过卡迪纳尔样条曲线平滑曲线（默认值）
basis：通过 B 样条平滑曲线

stack

布尔值，指定在堆叠渲染器（区域、条形图等）的上下文中是否应堆叠系列。默认为 true。

方法

一旦创建了图表，请调用以下方法来获取屏幕上的像素、更改配置和设置回调。

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.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.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和跨浏览器支持

此库在现代浏览器和IE9+中工作。

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

依赖关系

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

某些扩展需要jQuery和jQuery UI，但对于绘制一些基本图表，您也可以不使用它们。

构建

对于构建，我们需要Node和npm。运行make应该可以顺利开始。

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

如果您想自己进行压缩，您需要向压缩器提示保留名为$super的变量。例如，在命令行中使用uglify：

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

或使用grunt-contrib-uglify的示例配置

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

贡献

我们总是欢迎拉取请求！请遵循以下一些指南

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

作者

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

许可证

本软件及其相关文档文件（以下简称“软件”）的副本的任何个人，免费获得本许可，可以不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许软件提供者进行上述操作，但须遵守以下条件

pauluswebster / shutterstock-rickshaw

维护者

详细信息