1 سؤال: متعدد خط الرسم البياني خط البيانات من الجدول

السؤال الذي تم إنشاؤه في Wed, May 8, 2019 12:00 AM

أحاول إنشاء رسم بياني متعدد الخطوط باستخدام مخطط js وزاوي. باستخدام الخريطة ، يمكنني تقليل بيانات json إلى صفيف Dimentional واحد ، لكنني بحاجة إلى تحويل أحد الأعمدة (الرأس) كتسمية مع عمود متوسط ​​كمحور ص وعمود الطابع الزمني كمحور x

نموذج لتنسيق json o /p من DB

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

التنسيق المتوقع لـ chartjs لإخراج المحور 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 في النتيجة للحصول على arity الصحيح

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
    لى>
وضع مصدر هنا