javascript - 来自 json 文件的数据，用于 CHAPS 时间线

Question

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

示例 17 使用 JSON，但它在 html 文件本身中。我想改用网络服务器上的外部 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);
    }

任何能告诉我我做错了什么的人都会得到一 block cookies ! :-)

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

Answer 1

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