1 सवाल: तालिका से बहु डाटासेट लाइन ग्राफ

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं चार्ट js और कोणीय का उपयोग करके एक बहु सेट लाइन ग्राफ बनाने की कोशिश कर रहा हूं। मैप का उपयोग करके मैं जसन डेटा को सिंगल डाइमेंशनल ऐरे में कम कर सकता हूं लेकिन मुझे कॉलम (हेड) में से एक को एवरेज कॉलम के रूप में वाई-एक्सिस और टाइमस्टैम्प कॉलम के रूप में एक्स-एक्सिस

के रूप में बदलना होगा।

DB से नमूना json प्रारूप o /p

var dataset = 
[{id:1, head:test1,timestamp:5/6/2019,average:12},]
{id:2, head:test1,timestamp:6/6/2019,average:15},
{id:3, head:test2,timestamp:5/6/2019,average:7},
{id:4, head:test2,timestamp:6/6/2019,average:20},
{id:5, head:test3,timestamp:6/6/2019,average:13}]

बहु y- अक्ष आउटपुट के लिए चार्टज के लिए अपेक्षित प्रारूप

 {data : [12, 15], label:test1},
 {data : [7, 20], label:test2},
 {data : [0, 13], label:test3},

मैं केवल स्तंभ डेटा में से प्रत्येक को एकल आयाम सरणी के रूप में परिवर्तित करने में सक्षम हूं, लेकिन जब से मैं पूरे डेटा को 1D सरणी में परिवर्तित कर रहा हूं, तो डेटा के बेमेल होने की संभावना है, अगर मैं सीधे एक ग्राफ प्राप्त करने की कोशिश करता हूं।

var labels = dataset.map(function(obj) {return obj.head});
var tstamp = dataset.map(function(obj) {return obj.timestamp});
var tavg = dataset.map(function(obj) {return obj.average});

कृपया मुझे अपने सुझाव बताएं कि डेटा को अपेक्षित प्रारूप में कैसे परिवर्तित किया जाए।

    
1
1 उत्तर                              1                         

आपके पास सबसे पहले ऑब्जेक्ट को अनुक्रमित करके कम करना होगा:

const data = dataset.reduce((accu, item) => {
  if (accu[item.head] == null) accu[item.head] = { data: [], label: item.head };
  accu[item.head].data.push(item.average);
  return accu;
}, {});

फिर परिणाम से मान निकालें

const result = Object.values(data);

उसके बाद आप सही एरीटी प्राप्त करने के लिए .data फ़ील्ड को पैड कर सकते हैं

result.forEach(line => {
  while (line.data.length < 2) 
    line.data.unshift(0);
});

    
0
2019-05-08 16: 23: 28Z
  1. धन्यवाद, यह काम किया
    2019-05-10 16: 39: 41Z
स्रोत रखा गया यहाँ