jQuery.ajax 和人力车 - 回调函数？

Question

我写了下面的代码。我的服务器上有一个有效的 json 文件，看起来像：

[
  {
    "data": [
      {
        "y": 1.0,
        "x": 1451936340.0
      },
      {
        "y": 1.0,
        "x": 1451936400.0
      },
      {
        "y": 1.0,
        "x": 1451936460.0
      }
    ]
  }
]

我有以下代码。我正在尝试使用 renderer: 'multi' 绘制折线图并在折线图上叠加点，但我遇到了很多障碍。我是 JS 的新手，我不明白我在哪里搞砸了。我想我的 jQuery.ajax 函数中需要一个回调函数，但我不确定。感谢您的帮助。

<html>
<head>

    <!-- css  -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">

  <!-- js -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>

</head>

<body>

    <div style="margin:10px auto;width:auto;" id="chart_container">

        <div id="chart"></div>
        <div id="slider"></div>

        <script>

            var json = jQuery.ajax({
                'url': "/assets/json/data.json",
                'success': function(json) {
                  console.log(json[0].data);
                }
            });

            var graph = new Rickshaw.Graph( {
                element: document.getElementById("chart"),
                renderer: 'multi',
                height: 200,
                width: 400,
                series: [
                                {
                                            name: "series 1",
                                            data: json[0].data,
                                            color: "rgba(255, 0, 0, 0.4)",
                                            renderer: "line"
                                }, {
                                            name: "series 2",
                                            data: json[0].data,
                                            color: "rgba(255, 0, 0, 0.4)",
                                            renderer: "scatterplot"
                                }
                ]
            } );

            graph.render();

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


            var detail = new Rickshaw.Graph.HoverDetail( {
                graph: graph
            } );

            graph.render();

        </script>

    </div>

</body>

Answer 1

这里有几处我要更改。

1.) jQuery.ajax returns a promise, 不是原始数据本身，所以 var json = jQuery.ajax(...) 不会分配你期望的 json 值.

2.) 传递一个success回调函数来正确访问服务器返回的JSON

3.) 只调用 graph.render() 一次。

Javascript

jQuery.ajax({
  'url': "/assets/json/data.json",
  'success': renderGraph // callback for ajax success
});

// wrap graph creation logic in a function to be used as a callback
function renderGraph(json) {
  var graph = new Rickshaw.Graph({
    element: document.getElementById("chart"),
    renderer: 'multi',
    height: 200,
    width: 400,
    series: [{
      name: "series 1",
      data: json[0].data,
      color: "rgba(255, 0, 0, 0.4)",
      renderer: "line"
    }, {
      name: "series 2",
      data: json[0].data,
      color: "rgba(255, 0, 0, 0.4)",
      renderer: "scatterplot"
    }]
  });

  // remove this, only render once at the end
  // graph.render();

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


  var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
  });

  graph.render();
}

jQuery.ajax 和人力车 - 回调函数？

jQuery.ajax and Rickshaw - Callback functions?

javascript

ajax

jquery

rickshaw