Question

我试图对人力车有一个体面的理解，所以我一直试图为一个更简单的例子添加功能，但范围滑块不起作用。我一直在查看此示例的代码以尝试使其工作，但即使我的代码看起来相同，它也不起作用。我的部分问题是我不确定所有缩小的文件包含什么，因此我不确定何时需要包含单个.js文件以实现哪些功能。我确定您已经注意到文档没有涵盖这一点，

所以，如果你们中有任何人对我有任何见解，我们将不胜感激。

关于以下代码的说明，我使用的是jinja2模板，因此url_for函数

vvv This is the rendered code for the pertinent section of html vvv
<div id="preview" class="ui-slider ui-slider-horizontal ui-widget ui-widget content ui-corner-all">
    <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
-------------------------------------------------
<!doctype>
<head>
    <link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">

    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/graph.css')}}">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/detail.css')}}">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/legend.css')}}">
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/lines.css')}}">

    <script src="{{ url_for('static', filename='vendor/d3.min.js')}}"></script>
    <script src="{{ url_for('static', filename='vendor/d3.layout.min.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="{{ url_for('static', filename='rickshaw.js')}}"></script>
    <script src="{{ url_for('static', filename='extensions.js')}}"></script>

    <script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.js')}}"></script>
    <script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.Preview.js')}}"></script>
</head>
<body>

<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="slider"></div>
</div>

<script>

// set up our data series with 50 random data points

var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
    random.addData(seriesData);
}

// instantiate our graph!

var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    width: 960,
    height: 500,
    renderer: 'line',
    stroke:true,
    preserve:true,
    series: [
        {
            color: "#c05020",
            data: seriesData[0],
            name: 'New York'
        }, {
            color: "#30c020",
            data: seriesData[1],
            name: 'London'
        }, {
            color: "#6060c0",
            data: seriesData[2],
            name: 'Tokyo'
        }
    ]
} );

graph.render();
var slider = new Rickshaw.Graph.RangeSlider({
    graph: graph,
    element: document.getElementById('slider'),
}); 
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
    graph: graph,
    element: document.getElementById('legend')

} ); 
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
    graph: graph,
    legend: legend
} );  
var order = new Rickshaw.Graph.Behavior.Series.Order( {
    graph: graph,
    legend: legend
} );
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
    graph: graph,
    legend: legend
} );
</script>

Answer 1

在此处使用演示：http://code.shutterstock.com/rickshaw/和独立示例：http://code.shutterstock.com/rickshaw/examples/extensions.html只需要id的{{1}}进行初始化。

我建议您从div中删除以下内容：

head

使用：

<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">

我认为这不会导致问题，但也不能改善任何问题。

我也看到他们使用：

<link type="text/css" rel="stylesheet" source="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.csss">

他们在包含jQuery UI之前执行此操作。我认为没有问题：

<script>
    jQuery.noConflict();
</script>

如果是我，我会建议：

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

示例：https://jsfiddle.net/Twisty/qoofL8kb/4/

Answer 2

在摆弄它后我意识到问题是我试图链接到jQuery-ui css文件的方式。相反，我下载了我需要的文件并将它们添加到项目中，以这种方式链接它们。

人力车：滑块无法渲染

2 个答案: