要在库中使用的JSON javascript数据对象（Timeline.js）_Javascript_Json_Timeline.js

要在库中使用的JSON javascript数据对象（Timeline.js）

javascript json

要在库中使用的JSON javascript数据对象（Timeline.js）,javascript,json,timeline.js,Javascript,Json,Timeline.js,我将@restcontroller的响应保存在JavaScript变量中调用localhost:8080/JSORresponse这样的URL得到的响应是一个JSONresponseTimeline（B），B是一个Bean 我正在使用的图书馆是。这是文档中感兴趣的部分：来源 source应该是要加载的JSON资源的路径，或者是对应于时间线模型的JavaScript对象以下是使用数据对象的示例： var dataObject = {timeline: {headline: "Headli

我将@restcontroller的响应保存在JavaScript变量中

调用localhost:8080/JSORresponse这样的URL得到的响应是一个JSONresponseTimeline（B），B是一个Bean

我正在使用的图书馆是。这是文档中感兴趣的部分：

来源

source

应该是要加载的JSON资源的路径，或者是对应于时间线模型的JavaScript对象

以下是使用数据对象的示例：

 var dataObject = {timeline: {headline: "Headline", type: ... }}
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     dataObject,
        embed_id:   'my-timeline'
    });

如果源是字符串，我们将尝试自动识别 Twitter搜索、谷歌电子表格或Storify等资源故事。否则，我们假设源代码是JSON或JSONP。如果字符串与.jsonp匹配，我们将把它作为jsonp处理，否则，我们将将追加？callback=onJSONP_数据。详见下文

我的代码如下所示，但有些东西似乎不起作用，因为我得到了一个完全空白的页面，没有我的时间线（它设置正确，可以使用模拟JSON）。我在控制台中没有收到任何错误。有人对如何解决这个问题有什么建议吗？（

beerS

是我需要使用的JSON的精确表示）

如果我这样做的话，时间轴工作得很好

  var beer;
      $.getJSON("http://localhost:8080/timeline",function(json){
          beer = json;   
          checkDrink();                
      });         

      function checkDrink() {
          console.log(JSON.stringify(beer));
          var beerS = JSON.stringify(beer)

          var timeline_config = {
           width: "100%",
           height: "100%",
           source: "../../resources/js/test_extra_html.json"
          }
      }   


      var timeline_config = {
       width: "100%",
       height: "100%",
       source: "../../resources/js/test_extra_html.json"
      }

显然，“testextra html”中的信息，而不是“beer”中的JSON

另外，我将所有jsp首页放在这里，以帮助您理解

 <head>
    <title>Timeline JS Example</title>
    <meta charset="utf-8">
    <meta name="description" content="TimelineJS example">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Style-->
    <style>
      html, body {
       height:100%;
       padding: 0px;
       margin: 0px;
      }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
      <!-- BEGIN Timeline Embed -->
      <div id="timeline-embed"></div>
      <script type="text/javascript">

      var beer;
      $.getJSON("http://localhost:8080/timeline",function(json){
          beer = json;   
          checkDrink();                
      });         

      function checkDrink() {
          console.log(JSON.stringify(beer));
          var beerS = JSON.stringify(beer)

          var timeline_config = {
           width: "100%",
           height: "100%",
           source: "../../resources/js/test_extra_html.json"
          }
      }   


      var timeline_config = {
       width: "100%",
       height: "100%",
       source: "../../resources/js/test_extra_html.json"
      }


      </script>
      <script type="text/javascript" src="../../resources/js/storyjs-embed.js"></script>
      <!-- END Timeline Embed-->
  </body>
</html>


Timeline JS示例
html，正文{
身高：100%；
填充：0px；
边际：0px；
}
var啤酒；
$.getJSON（“http://localhost:8080/timeline，函数（json）{
啤酒=json；
检查饮料（）；
});         
函数checkDrink（）{
log（JSON.stringify（beer））；
var beerS=JSON.stringify（啤酒）
变量时间线\u配置={
宽度：“100%”，
高度：“100%”，
来源：“../resources/js/test\u extra\u html.json”
}
}   
变量时间线\u配置={
宽度：“100%”，
高度：“100%”，
来源：“../resources/js/test\u extra\u html.json”
}

好吧，您没有使用

timeline\u config

执行任何操作。抱歉，问题不清楚，我已经配置了所有库和html页面，但它们都正常工作，问题是如果我在timeline未显示的函数中都有，现在我用更多的代码更新这个问题，我假设它与您之前的问题类似：时间线在设置

timeline\u config

之前初始化。您必须在回调中初始化它。但是既然

source

可以是一个URL，为什么要使用

getJSON

，而不只是将

source

设置为

http://localhost:8080/timeline

？根据您发布的文档，它假定这是一个URL，因为您正在向它传递一个JSON字符串并尝试加载它？您应该传入解析后的JSON，

beer

，而不是JSON字符串OK当我尝试只将URL放入源代码时，JSON出现了问题，但现在我尝试了，它正在工作，谢谢大家；）

 <head>
    <title>Timeline JS Example</title>
    <meta charset="utf-8">
    <meta name="description" content="TimelineJS example">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Style-->
    <style>
      html, body {
       height:100%;
       padding: 0px;
       margin: 0px;
      }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>
  <body>
      <!-- BEGIN Timeline Embed -->
      <div id="timeline-embed"></div>
      <script type="text/javascript">

      var beer;
      $.getJSON("http://localhost:8080/timeline",function(json){
          beer = json;   
          checkDrink();                
      });         

      function checkDrink() {
          console.log(JSON.stringify(beer));
          var beerS = JSON.stringify(beer)

          var timeline_config = {
           width: "100%",
           height: "100%",
           source: "../../resources/js/test_extra_html.json"
          }
      }   


      var timeline_config = {
       width: "100%",
       height: "100%",
       source: "../../resources/js/test_extra_html.json"
      }


      </script>
      <script type="text/javascript" src="../../resources/js/storyjs-embed.js"></script>
      <!-- END Timeline Embed-->
  </body>
</html>