Jquery 人力车-在用户翻滚图例之前，注释不会出现
我刚刚开始学习人力车（正如下面臃肿的演示代码所示）。我已经按照我的意愿运行了大部分内容，但是我有一个奇怪的错误，在用户翻过图例之前，注释不会出现 有没有办法解决这个问题 谢谢Jquery 人力车-在用户翻滚图例之前，注释不会出现,jquery,jquery-ui,rickshaw,Jquery,Jquery Ui,Rickshaw,我刚刚开始学习人力车（正如下面臃肿的演示代码所示）。我已经按照我的意愿运行了大部分内容，但是我有一个奇怪的错误，在用户翻过图例之前，注释不会出现 有没有办法解决这个问题 谢谢 <html> <head> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> <li
<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>
关键词KPI-8/4/13-10/27/13
var图=新人力车。图（{
元素：document.getElementById（“图表”），
宽度：700，
身高：400，
渲染器：“行”，
系列：[
{
颜色：#c05020“，
数据：[{“x”：1375574400，“y”：0.0395}，{“x”：1375660800，“y”：0.0269}]，
名称：“转换”
}, {
颜色：“30c020”，
数据：[{“x”：1375574400，“y”：0.243}，{“x”：1375660800，“y”：0.267}]，
名称：“退出率”
}, {
颜色：#6060c0“，
数据：[{“x”：1375574400，“y”：0.524}，{“x”：1375660800，“y”：0.467}]，
名称：“成功活动”
}
]
} );
graph.render（）；
var annotator=新人力车.Graph.Annotate({
图：图，
元素：document.getElementById（'timeline'）
});
添加（1382400000，“优化完成”）；
添加（1380844800，“优化制造”）；
添加（1377475200，“优化制造”）；
var slider=新人力车.Graph.RangeSloider（{
图：图，
元素：$（“#滑块”）
} );
var hoverDetail=新人力车.Graph.hoverDetail（{
图：图，
格式化程序：函数（系列，x，y）{
变量日期=''+新日期（x*1000）.ToutString（）+''；
变量百分比=数学四舍五入（（y*100）*100）/100；
var content=series.name+“：”+百分比+“%”；
返回内容；
}
} );
var图例=新人力车。图形。图例（{
图：图，
元素：document.getElementById（'图例'）
} );
var highlighter=新人力车.图形.行为.系列.突出显示（{
图：图，
传奇：传奇
} );
var shelving=新人力车.图形.行为.系列.切换（{
图：图，
传奇：传奇
} );
var轴=新人力车。图形。轴。时间（{
图形：图形
} );
axes.render（）；
渲染后立即重新绘制包含注释的图形。这是一个黑客程序，但它有效…我遇到了与OP相同的问题，并尝试了Chris Neale的黑客程序。它工作了，但代价是大量的CPU负载。更改为setTimeout并使用500的时间间隔似乎可以在没有额外CPU负载的情况下正常工作。所以
setTimeout(function(){
graph.update();
},500);
annotator.update()
在上一个annotator.add（）之后。注意：为了简洁起见，我删除了大部分系列数据。通常，注释不会指定给数据范围之外的日期。
annotator.update()