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 等级

相关问题

laurentdebricon picture laurentdebricon  ·  3评论

aishwaryak picture aishwaryak  ·  4评论

kethomassen picture kethomassen  ·  3评论

DieterSpringer picture DieterSpringer  ·  4评论

unlight picture unlight  ·  3评论