5

这是我在这里的第一个问题,所以请放轻松:)

我正在尝试使用人力车图、d3 和 jquery UI 来实现一些折线图。我有一些垂直选项卡,并成功地让图表从外部 html 文件加载。

有一些关于 Rickshaw 的文档,但我找不到我的具体目标,所以如果可以的话,我会问这个社区几个问题?

首先,当从外部 html 文件加载 jquery UI 中的选项卡时,我应该将所有 javascript 和 css 放入嵌入的页面(见下文history.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 轴“刻度”的末尾。所以 x 轴会读取 50 毫秒、100 毫秒、150 毫秒等……可以这样做吗?

最后,在 Rickshaw 中,他们有一个带有所有花里胡哨的扇形示例 ( http://code.shutterstock.com/rickshaw/examples/extensions.html )。它有两个属性,我找不到任何信息。坚持:真的吗?另一个例子有tickFormat 和tickTreatment?有人可以解释一下这些是做什么的。

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

非常感谢您的帮助。

4

1 回答 1

1

可能不再与 OP 相关,但由于仍然没有答案,我可以回答 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'),
} );

这将使刻度简单地成为数字后跟 ms。

这也恰好回答了以下三部分问题的一部分。其他两部分涉及tickTreatmentpreserve

简短的回答是tickTreatment作为一个类添加到刻度中。之所以有用,是因为 Rickshaw 可以利用 CSS 样式。他们有一些你可以使用的预设。他们在该示例中使用的称为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;

基本上,如果您设置preservetrue(默认为false),它将首先复制数据。

于 2014-08-06T23:28:15.033 回答