这是我在这里的第一个问题,所以请放轻松:)
我正在尝试使用人力车图、d3 和 jquery UI 来实现一些折线图。
我有一些垂直选项卡,并已成功地从外部 html 文件加载图表。
有一些关于人力车的文档,但我找不到我特别想要的东西,所以如果可以的话,我会问这个社区一些问题吗?
首先,当从外部 html 文件加载 jquery UI 中的选项卡时,我应该将所有 javascript 和 css 放入嵌入的页面(请参见下面的historical.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 轴以毫秒为单位。我想在每个 x 轴“刻度”的末尾附加“ms”。所以 x 轴将读取 50ms、100ms、150ms 等......这可以完成吗?
最后,在人力车中,他们有一个风扇悬挂的例子 (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,
非常感谢您的帮助。
最佳答案
可能不再与 OP 相关,但由于仍未得到解答,我可以回答人力车问题:
要将 ms 附加到刻度的末尾,您需要使用 tickFormat
选项。在 their tutorial ,他们按如下方式设置轴:
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
在这里,他们正在设置
tickFormat
作为他们内置的默认值,但实际上,它可以采用任何符合 d3's axis' 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 的数字。
这也恰好回答了以下三部分问题中的一部分。另外两部分关注
tickTreatment
和 preserve
.简短的回答是
tickTreatment
被作为类添加到刻度中。这很有用的原因是 CSS 样式,Rickshaw 利用了它。他们有一些预设可以用于此目的。他们在那个例子中使用的那个叫做 glow
,它会在文本周围添加白色光晕,使其在图表顶部可读。preserve
是一个选项,它会影响您提供的数据在使用前是否被复制。人力车来源的相关部分在这里: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
),它会先复制数据。
关于tabs - 将值附加到人力车图形轴以及什么是滴答处理和保留,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15490167/