文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将timeline.js源代码更改为接收JSON字符串而不是JSON文件？

问如何将timeline.js源代码更改为接收JSON字符串而不是JSON文件？
EN

Stack Overflow用户

提问于 2014-02-18 10:41:29

回答 1查看 2.4K关注 0票数 1

我有一个使用Timeline.js的时间线，但目前的故事是红色的从一个.json文件，这不是理想的情况。

我有一个servlet，它处理信息并将JSONObject放在一起，然后传递给具有Timeline.js的页面。

Timeline.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Load Example Timeline</title>
<meta name="description" content="TimelineJS example">
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

    <div id="timeline-embed"></div>
    <script type="text/javascript">
        var timeline_config = {
            width:              '100%',
            height:             '600',
            source:             '${timeline}',
            embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
            start_at_end:       false,                          //OPTIONAL START AT LATEST DATE
            start_at_slide:     '4',                            //OPTIONAL START AT SPECIFIC SLIDE
            start_zoom_adjust:  '3',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
            hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES
            font:               'Bevan-PotanoSans',             //OPTIONAL FONT
            debug:              true,                           //OPTIONAL DEBUG TO CONSOLE
            lang:               'pt',                           //OPTIONAL LANGUAGE
            maptype:            'watercolor',                   //OPTIONAL MAP STYLE
            css:                'css/timeline.css',     //OPTIONAL PATH TO CSS
            js:                 'js/timeline-min.js'    //OPTIONAL PATH TO JS
        }
    </script>
    <script type="text/javascript"
        src="http://cdn.knightlab.com/libs/timeline/latest/js/storyjs-embed.js"></script>

</body>
</html>

源下的正常情况是一个json文件。但是，我需要将从servlet发送的JSONObject放在那里。

doGet方法的TimelineServlet.java：

@Override
    protected void doGet(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {

        List<LifeEvent> lifeEvents = new ArrayList<LifeEvent>();

        lifeEvents.add(eventProducer.generateRandomLifeEvent(true));

        JSONObject timeline = JSONString(lifeEvents);

        request.setAttribute("picPath",
                PropertyLoader.getStringValue("PICTURE_DIRECTORY_REL")+"/");
        request.setAttribute("timeline", timeline);

        getServletConfig().getServletContext()
        .getRequestDispatcher("/Timeline.jsp")
        .forward(request, response);
    }

我知道，时间线返回一个格式良好的故事情节，相应地，他们提供的文件。

下面是代码生成的JSONObject：

{
   "Timeline":{
      "headline":"Your life events",
      "startDate": "Tue Feb 18 10:39:10      GMT 2014",
      "text":"Life events with different media types",
      "date":[
         {
            "headline":"Another nice day",
            "startDate": "Tue Feb 18 10:39:10            GMT 2014",
            "text":"Another nice day",
            "asset":[
               {
                  "caption":"Rita HenriquesCarlos Barata",
                  "credit":"Carlos Barata",
                  "media":"porsche.jpg"
               }
            ],
            "endDate": "Tue Feb 18 10:39:10            GMT 2014"
         }
      ],
      "type":"default"
   }
}

java

javascript

json

servlets

timeline.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-18 16:34:10

我已经拿到这个了。

我需要做的是：

<script type="text/javascript">
    var dataObject = ${timeline};
        var timeline_config = {
            width:              '100%',
            height:             '600',
            source:             dataObject,
            embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
            start_at_end:       false,                          //OPTIONAL START AT LATEST DATE
            start_at_slide:     '0',                            //OPTIONAL START AT SPECIFIC SLIDE
            start_zoom_adjust:  '3',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
            hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES
            font:               'Bevan-PotanoSans',             //OPTIONAL FONT
            debug:              true,                           //OPTIONAL DEBUG TO CONSOLE
            lang:               'pt',                           //OPTIONAL LANGUAGE
            maptype:            'watercolor',                   //OPTIONAL MAP STYLE
            css:                'css/timeline.css',     //OPTIONAL PATH TO CSS
            js:                 'js/timeline-min.js'    //OPTIONAL PATH TO JS
        }
    </script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21851251

复制

相似问题

问如何将timeline.js源代码更改为接收JSON字符串而不是JSON文件？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将timeline.js源代码更改为接收JSON字符串而不是JSON文件？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将timeline.js源代码更改为接收JSON字符串而不是JSON文件？
EN