1

我正在尝试使用 CHAP 链接库时间线（http://almende.github.io/chap-links-library/timeline.html）。

Example17 使用 JSON，但它在 html 文件本身中。我想改用位于 Web 服务器上的外部 JSON 文件。

这是我的example.json：

{"timeline":[
    {
        "start":"2013,7,26",
        "end":"2013,7,26",
        "content": "Bleah1"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah2"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah3"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah4"
    }
]}

我添加了这个：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

这是修改后的功能：

        // Called when the Visualization API is loaded.
    function drawVisualization() {
        // Create a JSON data table

          $.getJSON('example.json', function(jsondata) {
                data = jsondata.timeline;
            });


        // specify options
        var options = {
            'width':  '100%',
            'height': '300px',
            'editable': true,   // enable dragging and editing events
            'style': 'box'
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

        function onRangeChanged(properties) {
            document.getElementById('info').innerHTML += 'rangechanged ' +
                    properties.start + ' - ' + properties.end + '<br>';
        }

        // attach an event listener using the links events handler
        links.events.addListener(timeline, 'rangechanged', onRangeChanged);

        // Draw our timeline with the created data and options
        timeline.draw(data, options);
    }

任何能告诉我我做错了什么的人都会得到一块饼干！:-)

更新：我应该指定它正确地呈现时间线 div，我只是没有显示任何数据。

4

2 回答 2

1

您的开始和结束日期需要被解析为 Date 对象以便在时间线中使用

于 2013-11-19T13:58:43.880 回答
1

我在实现类似功能时偶然发现了这篇文章。

在timeline.js 的2.6.1 版本中，在函数links.Timeline.Item 被声明的第3439 行附近，您会注意到与实现parseJSONDate 相关的注释。

/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
         this.start = links.Timeline.parseJSONDate(data.start);
         this.end = links.Timeline.parseJSONDate(data.end);
         */

我启用了建议的代码，一切正常！*（转到 parseJSONDate 函数以查看接受哪些格式）

*（只要日期出现在时间线上就可以工作。我没有使用因此不测试任何选择/删除功能、图像或类似的东西..）

于 2014-03-14T12:13:31.990 回答