Javascript 用于CHAPS时间线的json文件中的数据

我正在尝试使用CHAP链接库时间表（）

示例17使用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);
    }

//加载可视化API时调用。
函数drawVisualization（）{
//创建JSON数据表
$.getJSON（'example.json'，函数（jsondata）{
数据=jsondata.timeline；
});
//指定选项
变量选项={
“宽度”：“100%”，
“高度”：“300px”，
“可编辑”：true，//启用拖动和编辑事件
“样式”：“框”
};
//实例化我们的时间线对象。
timeline=newlinks.timeline（document.getElementById（'mytimeline'）；
函数onRangeChanged（属性）{
document.getElementById（'info'）.innerHTML+='rangechanged'+
properties.start+'-'+properties.end+'
'；
}
//使用链接事件处理程序附加事件侦听器
links.events.addListener（时间线'rangechanged'，onRangeChanged）；
//用创建的数据和选项绘制时间线
时间线。绘制（数据、选项）；
}

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

---

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

您的开始和结束日期需要解析为日期对象，以便在timeline中使用。

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

在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函数查看接受哪些格式）

---

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

move“}）；**“移动到最后一个“}”之前谢谢@dandavis，但这似乎完全破坏了它。您的意思是将函数中的第三行代码向下移动到倒数第二行吗？也许我误解了。您想要结束$.getJSON回调的“}”）；，以一直延伸到drawVisualization（）的末尾，这样90%的drawVisualization是回调本身，包含绘制可视化所需的数据。因此，在您的代码中使用：$.getJSON（'example.json'，function（jsondata）{data=jsondata.timeline；foreach（data）{data.date=newdate（data.date）；}}；