Javascript-Code, um JSON-Daten in zwei Datenpunkte-Array zu teilen, um mit Stackbar-Diagramm canvasjs zu binden?

Question

Ich habe mit variablen Daten json Daten, wie nachstehend:

[ 
    { 
     "BillingMonth":"11", 
     "BillingYear":"2016", 
     "Volume":"72", 
     "BillingMonthName":"November", 
     "BillingProduct":"Product1" 
    }, 
    { 
     "BillingMonth":"11", 
     "BillingYear":"2016", 
     "Volume":"617", 
     "BillingMonthName":"November", 
     "BillingProduct":"Product2" 
    }, 
    { 
     "BillingMonth":"12", 
     "BillingYear":"2016", 
     "Volume":"72", 
     "BillingMonthName":"December", 
     "BillingProduct":"Product1" 
    }, 
    { 
     "BillingMonth":"12", 
     "BillingYear":"2016", 
     "Volume":"72", 
     "BillingMonthName":"December", 
     "BillingProduct":"Product2" 
    } 
] 

Was will ich über JSON-Daten mit Hilfe von Javascript/jquery spalten und sie in zwei Variablen data1 gespeichert bekommen, json Daten wie unten als Ergebnis Daten2 mit:

{ 
    type: "stackedBar", 
    legendText: "Product1", 
    showInLegend: "true", 
    data1: [ 
     { x: November, y: 72 }, 
     { x: December, y: 72 }, 
    ] 
    } 

und

{ 
     type: "stackedBar", 
     legendText: "Product2", 
     showInLegend: "true", 
     data2: [ 
      { x: November, y: 617 }, 
      { x: December, y: 72 }, 
     ] 
    } 

Die oben in Leinwand js stackedbar Chart binden.

Danke!

Answer 1

Hey, hier ist eine Lösung, an der ich viel Spaß hatte. Ich hoffe, es funktioniert gut für dich. Ich war mir nicht sicher, ob Sie immer 2 Produkte product1, product2 haben würden, also ging ich mit einer allgemeineren Annäherung für n Menge der Produkte. Das Ergebnis ist in einem Array-Format, aber Sie können es6 destructuring bekommen die beiden Variablen verwenden data1 und data2 wie ich weiter unten tat

/* 
 
* helper function to restructure json in the desired format 
 
*/ 
 
function format(obj) { 
 
    var formatted = { 
 
    "type": "stackedBar", 
 
    "legendText": obj.BillingProduct, 
 
    "showInLegend": "true", 
 
    "data": [{ 
 
     "x": obj.BillingMonthName, 
 
     "y": obj.Volume 
 
    }] 
 
    } 
 
    return formatted; 
 
} 
 

 
/* 
 
* returns an array of unique products with corresponding BillingMonth/Volume data 
 
*/ 
 
function getStackedBarData(data) { 
 
    // transform each obj in orignal array to desired structure 
 
    var formattedData = data.map(format); 
 

 
    // remove duplicate products and aggregate the data fields 
 
    var stackedBarData = 
 
    formattedData.reduce(function(acc, val){ 
 

 
     var getProduct = acc.filter(function(item){ 
 
     return item.legendText == val.legendText 
 
     }); 
 

 
     if (getProduct.length != 0) { 
 
     getProduct[0].data.push(val.data[0]); 
 
     return acc; 
 
     } 
 

 
     acc.push(val); 
 
     return acc; 
 
    }, []); 
 

 
    return stackedBarData; 
 

 
} 
 

 
var data = [{ 
 
    "BillingMonth": "11", 
 
    "BillingYear": "2016", 
 
    "Volume": "72", 
 
    "BillingMonthName": "November", 
 
    "BillingProduct": "Product1" 
 
}, { 
 
    "BillingMonth": "11", 
 
    "BillingYear": "2016", 
 
    "Volume": "617", 
 
    "BillingMonthName": "November", 
 
    "BillingProduct": "Product2" 
 
}, { 
 
    "BillingMonth": "12", 
 
    "BillingYear": "2016", 
 
    "Volume": "72", 
 
    "BillingMonthName": "December", 
 
    "BillingProduct": "Product1" 
 
}, { 
 
    "BillingMonth": "12", 
 
    "BillingYear": "2016", 
 
    "Volume": "72", 
 
    "BillingMonthName": "December", 
 
    "BillingProduct": "Product2" 
 
}] 
 

 
var dataVars = getStackedBarData(data); 
 

 
var data1 = dataVars[0]; 
 
var data2 = dataVars[1]; 
 

 
console.log(data1); 
 
console.log(data2);

Hoffnung, dies hilft Ihnen!