2017-08-29 15 views
1

私は棒グラフを描画するためにPlotlyを使用しています。現在、私はデータをハードコーディングしています。しかし今、私はチャートにjsonデータを欲しがっています。どうやってそれを解析して使うことができますか?親切にも、私はjsonの新しい人です。JsonデータをBarchartに適用する-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); 

今はパーソンJSONデータを必要とX軸及びY軸にJSONデータから値を割り当てる:

//以下はplotlyコードです。

[{"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"}] 
+0

あなたはJSONで3つのオブジェクトを持っています。それを3つのトレースに吐き出すのですか?または3点に? –

+0

はいそれは3つのオブジェクトだけを持っています、それは実際には私はjsonからデータを解析し、グラフに適用する方法についての論理を知りたい生データです – user8439599

答えて

0

これは簡単な例ですが、X軸とY軸の変数名を必要なものに変更してください。問題がある場合はお知らせください。

JSFiddle Demo

コード:

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); 
関連する問題