C3: 外部JSONファイルを使用した動的なグラフ化

作成日 2016年10月15日  ·  3コメント  ·  ソース: c3js/c3

この素晴らしいオープンソースライブラリを作成していただき、ありがとうございます。
チャートがjsonデータを一度に解析する外部JSONファイルを使用して動的チャートを作成したいと思います。
私の現在のコード:
var chart = c3.generate({ bindto: '#chart', size: { height: 240, width: 480 }, data: { url: 'static/data/trainp.json', mimeType: 'json', keys: { x: 'Series', value: ['Setting1'] }, type: 'line' }, subchart: { show: true } });

必要なチャートの例: https

https://jsfiddle.net/cy2owjva/でどのような変更を加える必要があるか教えて
ありがとうございました

最も参考になるコメント

@AskSaikatSinhaこれを試してみてください
`
$(関数(){

$.getJSON('./linejson.json', function (externaldata) {
var chart = c3.generate({
    title: {
        text:'External JSON loading via C3.js'
    },
    bindto: '#chart',
    data: {
       json: externaldata,
        type: 'area-spline',

    }
})

setInterval(function(){
    chart.flow({
        columns:
                [
                    ['data1',Math.round(Math.random()*200)]
                ],
        type:'area-spline'
    })
}, 1500)

});
})
`

そして、そのような外部JSONファイルを持っています

linejson.jsonファイル

{ "data1": [30, 20, 50, 40, 60, 50] }

全てのコメント3件

@AskSaikatSinhaこれを試してみてください
`
$(関数(){

$.getJSON('./linejson.json', function (externaldata) {
var chart = c3.generate({
    title: {
        text:'External JSON loading via C3.js'
    },
    bindto: '#chart',
    data: {
       json: externaldata,
        type: 'area-spline',

    }
})

setInterval(function(){
    chart.flow({
        columns:
                [
                    ['data1',Math.round(Math.random()*200)]
                ],
        type:'area-spline'
    })
}, 1500)

});
})
`

そして、そのような外部JSONファイルを持っています

linejson.jsonファイル

{ "data1": [30, 20, 50, 40, 60, 50] }

私も同じ問題を抱えています。 リアルタイムデータのストリームを使用してグラフをアニメーション化しようとしています。
これを試しました:

var xhr = new XMLHttpRequest();
function reload(){
    //each call on this url changes the json
    xhr.open('GET', "http://127.0.0.1:5000/json/", true).send(); 
    chart.flow('http://127.0.0.1:5000/json/');
    chart.flush()
}

setInterval(reload, 500);

フロー、生成、ロードを試行しましたが、ブラウザをリロードせずにチャートをリロードするものはありませんでした。

任意のヒント?

@HawiCaesarありがとうございます。コードは機能します。

このページは役に立ちましたか?
0 / 5 - 0 評価