将值添加到Rickshaw图轴上，ticksTreatment是什么？如何保留？

Question

这是我在这里提出的第一个问题，所以请轻一点：）

我正在尝试使用rickshaw图表、d3和jquery UI实现一些折线图。我有一些垂直选项卡，并已成功地从外部HTML文件中加载了图表。

Rickshaw上有一些文档，但我找不到我特别想知道的内容，所以我想问问这个善良的社区几个问题，如果可以的话？

首先，在从外部html文件中加载选项卡时，应该将所有的javascript和css放入嵌入的页面（如下面的historic.html）还是放入父页面？我尝试了两种方式，它们似乎都可以工作，我只是想知道最佳实践是什么。

<ul>
    <li><a href="#tabs-1"><div id="live-icon"></div>LIVE GRAPHS</a></li>
    <li><a href="historic.html"><div id="historic-icon"></div>HISTORIC DATA</a></li>

其次，在图表上，我想让x轴的刻度以毫秒为单位，并在每个刻度后添加"ms"。因此，x轴将显示50ms、100ms、150ms等等...这可行吗？

最后，在Rickshaw中，它有一个复杂的示例（http://code.shutterstock.com/rickshaw/examples/extensions.html），具有所有的功能和特点。它有两个属性，我找不到任何关于它们的信息：perserve: true和另一个示例有tickFormat和tickTreatment。请问有人能解释一下这些是做什么的吗？

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,

非常感谢您的帮助。

- designscoop

Answer 1

也许对于原帖已经不再相关，但既然还没有答案，我可以回答 Rickshaw 的问题：

要在刻度末尾添加毫秒(ms)，您需要使用 tickFormat 选项。在 他们的教程 中，他们设置轴如下：

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

在这里，他们正在设置tickFormat为默认值，但实际上，它可以接受符合 d3的轴的tickFormat 要求的任何内容。 tickFormat 应该是一个接受数字并输出字符串的函数。您可能想要类似以下的内容：

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: function (d) { return d + ' ms'; },
        element: document.getElementById('y_axis'),
} );

这将使刻度变得简单，只是后面跟着毫秒数的数字。

这也恰好回答了随后的三个问题中的一个部分。另外两个部分涉及tickTreatment和preserve。

简短地回答是，tickTreatment被添加为刻度的类。这有用的原因是为了CSS样式，Rickshaw利用了这一点。他们有一些预设可以使用。他们在那个例子中使用的是称为glow的预设，它在文本周围添加了一个白色的发光效果，使其在图表上可读。

preserve是一个选项，影响您提供的数据在使用之前是否会被复制。Rickshaw源代码中相关的部分在这里：

var preserve = this.preserve;
if (!preserve) {
    this.series.forEach( function(series) {
        if (series.scale) {
            // data must be preserved when a scale is used
            preserve = true;
        }
    } );
}

data = preserve ? Rickshaw.clone(data) : data;

基本上，如果将preserve设置为true（默认值为false），它将首先复制数据。

- Mike Precup