Appliquer les données Json à Barchart -Plotly

Question

J'utilise Plotly pour tracer un graphique à barres. Actuellement, je donne des données codées en dur. Mais maintenant je veux jeter des données json à la carte. Comment pouvons-nous l'analyser et l'utiliser? Veuillez aider car je suis nouveau à Johnson.

// ci-dessous est le code plotly:

var trace1 = { 
     x: ['giraffes', 'orangutans', 'monkeys'], 
     y: [20, 14, 23], 
     name: 'SF Zoo', 
     type: 'bar' 
    }; 
    var trace2 = { 
     x: ['giraffes', 'orangutans', 'monkeys'], 
     y: [12, 18, 29], 
     name: 'LA Zoo', 
     type: 'bar' 
    }; 
    var data = [trace1, trace2]; 
    var layout = { 
     barmode: 'group' 
    }; 
    Plotly.newPlot('myDiv', data, layout); 

Maintenant, je veux des données Parson JSON et attribuer une valeur à partir des données JSON à x et y axe.

[{"PartList.PartList.COID":"3D3DB2BCF8A50D94", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}, {"PartList.PartList.COID":"3D3DB2BCF8A50D9F", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}, {"PartList.PartList.COID":"3D3DB2BCF8A50D9F", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}] 

Answer 1

Voici un exemple simple de la façon de le faire, s'il vous plaît changer les noms de variables dans les axes X et Y à tout ce que vous voulez. S'il vous plaît laissez-moi savoir s'il y a des problèmes.

JSFiddle Demo

code:

var data = [{"PartList.PartList.COID":"3D3DB2BCF8A50D94", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}, {"PartList.PartList.COID":"3D3DB2BCF8A50D9F", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}, {"PartList.PartList.COID":"3D3DB2BCF8A50D9F", "PartList.PartList.COMPID":3030, "PartList.PartList.C_VERSION":1, "PartList.PartList.NATCO":"null"}] 

var traces = []; 
data.forEach(function(val){ 
    var trace = { 
    x: [val["PartList.PartList.COMPID"]], 
    y: [val["PartList.PartList.C_VERSION"]], 
    name: val["PartList.PartList.COID"], 
    type: 'bar' 
    }; 
    traces.push(trace); 
}); 
console.log(traces); 
    var layout = { 
     barmode: 'group' 
    }; 
Plotly.newPlot('tester', traces, layout);