0

我刚刚开始学习人力车（从下面臃肿的演示代码可以看出）。我几乎可以按照自己的意愿运行所有东西，但是我有一个奇怪的错误，在用户翻阅图例之前，注释不会出现。

任何想法如何解决它？

谢谢！

<html>
<head>

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="css/graph.css">
<link type="text/css" rel="stylesheet" href="css/detail.css">
<link type="text/css" rel="stylesheet" href="css/legend.css">
<link type="text/css" rel="stylesheet" href="css/extensions.css">

<script src="js/d3.v2.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

<script src="js/Rickshaw.js"></script>
<script src="js/Rickshaw.Class.js"></script>
<script src="js/Rickshaw.Compat.ClassList.js"></script>
<script src="js/Rickshaw.Graph.js"></script>
<script src="js/Rickshaw.Graph.Renderer.js"></script>
<script src="js/Rickshaw.Graph.Renderer.Area.js"></script>
<script src="js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="js/Rickshaw.Graph.Renderer.Bar.js"></script>
<script src="js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
<script src="js/Rickshaw.Graph.RangeSlider.js"></script>
<script src="js/Rickshaw.Graph.HoverDetail.js"></script>
<script src="js/Rickshaw.Graph.Annotate.js"></script>
<script src="js/Rickshaw.Graph.Legend.js"></script>
<script src="js/Rickshaw.Graph.Axis.Time.js"></script>
<script src="js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
<script src="js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
<script src="js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
<script src="js/Rickshaw.Graph.Smoother.js"></script>
<script src="js/Rickshaw.Graph.Unstacker.js"></script>
<script src="js/Rickshaw.Fixtures.Time.js"></script>
<script src="js/Rickshaw.Fixtures.Time.Local.js"></script>
<script src="js/Rickshaw.Fixtures.Number.js"></script>
<script src="js/Rickshaw.Fixtures.RandomData.js"></script>
<script src="js/Rickshaw.Fixtures.Color.js"></script>
<script src="js/Rickshaw.Color.Palette.js"></script>
<script src="js/Rickshaw.Graph.Axis.Y.js"></script>

<script src="js/extensions.js"></script>





</head>
<body>

<h1>Keyword KPIs - 8/4/13 - 10/27/13</h1>

<div id="chart_container">
<div id="chart"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="timeline"></div>
<div id="slider"></div>
</div>

<script type="text/javascript">

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 700,
height: 400,
renderer: 'line',
series: [
{
color: "#c05020",
data: [{"x":1375574400,"y":0.0395}, {"x":1375660800,"y":0.0269}],
name: 'Conversion'
}, {
color: "#30c020",
data: [{"x":1375574400,"y":0.243}, {"x":1375660800,"y":0.267}],
name: 'Exit Rate'
}, {
color: "#6060c0",
data: [{"x":1375574400,"y":0.524}, {"x":1375660800,"y":0.467}],
name: 'Success Events'
}
]
} );

graph.render();

var annotator = new Rickshaw.Graph.Annotate({
graph: graph,
element: document.getElementById('timeline')
});

annotator.add(1382400000, 'Optimization Made');
annotator.add(1380844800, 'Optimization Made');
annotator.add(1377475200, 'Optimization Made');


var slider = new Rickshaw.Graph.RangeSlider( {
graph: graph,
element: $('#slider')
} );

var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph,
formatter: function(series, x, y) {
var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
var percent = Math.round((y * 100) * 100) / 100;
var content = series.name + ": " + percent + "%";
return content;
}
} );

var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')

} );

var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: graph,
legend: legend
} );

var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );

var axes = new Rickshaw.Graph.Axis.Time( {
graph: graph
} );
axes.render();

</script>

</body>
</html>
4

2 回答 2

2

我遇到了与 OP 相同的问题，并尝试了 Chris Neale 的破解。它起作用了，但代价是大量的 CPU 负载。更改为 setTimeout 并使用 500 的时间间隔似乎可以正常工作，而无需额外的 CPU 负载。所以 ...

setTimeout(function(){
    graph.update();
},500);

我在 Rickshaw github repo 上添加了一张问题单。

2013 年 12 月 23 日更新

如 github 问题单（见上面的链接）和Rickshaw 概述页面中所述，真正的解决方案是添加：

annotator.update()

在你最后一个 annotator.add() 之后。

于 2013-12-16T04:56:28.053 回答
0 
setInterval(function(){
    graph.update();
},0);

渲染后立即重绘包含注释的图形。这是一个黑客，但它的工作原理......

于 2013-11-04T14:31:09.423 回答