jQuery.ajax и Rickshaw - функции обратного вызова?

Я написал следующий код. У меня есть json-файл на моем сервере, который действителен и выглядит так:jQuery.ajax и Rickshaw - функции обратного вызова?

[ 
    { 
    "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>

источник

2016-01-05 MakleBirt

Есть несколько вещей, которые я хотел бы изменить здесь.

1.) jQuery.ajax возвращает 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(); 
}

источник

2016-01-05 17:43:29 SteamDev

Спасибо большое за четкое объяснение. Это работало так, как я этого хотел. – MakleBirt

jQuery.ajax и Rickshaw - функции обратного вызова?

ответ

Смежные вопросы