C3: رسم ديناميكي باستخدام ملف JSON خارجي

تم إنشاؤها على ١٥ أكتوبر ٢٠١٦ · 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://jsfiddle.net/cy2owjva/

يرجى إعلامي بالتغيير الذي يتعين علي إجراؤه في https://jsfiddle.net/cy2owjva/ .
اشكرك

مصدر

Saikat-Sinha

التعليق الأكثر فائدة

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] }

HawiCaesar في ١ نوفمبر ٢٠١٦

👍2

ال 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] }

HawiCaesar في ١ نوفمبر ٢٠١٦

👍2

أنا في نفس المشكلة. محاولة تحريك مخطط بدفق من البيانات في الوقت الفعلي.
جرب هذا:

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);

حاول التدفق والتوليد

أي نصائح؟