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 に答える