JSONデータを含むChart.jsの棒グラフ

Question

次のJSONデータがあります。

[ 
    { 
     "date": "2016-05-01T00:00:00", 
     "productInformation": [ 
     { 
      "productName": "Apple", 
      "totalWeight": 200 
     } 
     ] 
    }, 
    { 
     "date": "2016-09-01T00:00:00", 
     "productInformation": [ 
     { 
      "productName": "Apple", 
      "totalWeight": 632 
     }, 
     { 
      "productName": "Mango", 
      "totalWeight": 856 
     }, 
     { 
      "productName": "Spinach", 
      "totalWeight": 545 
     }, 
     { 
      "productName": "Grapes", 
      "totalWeight": 338 
     } 
     ] 
    }, 
    { 
     "date": "2017-01-01T00:00:00", 
     "productInformation": [ 
     { 
      "productName": "Mango", 
      "totalWeight": 500 
     } 
     ] 
    } 
] 

X軸では月と年を表示したいが、Y軸には製品情報の積み重ね棒を表示したい。たとえば、2016年5月5日にアップルのみが表示されるので、アップルのみが表示されます。 2016-09には4つの製品がありますので、4つの製品とその合計重量に基づいて4つのステーキングバーが表示されます。私はchart.jsのドキュメントを読んだ。ドキュメントによると、データセットにY軸の値を指定する必要があります。特定のJSONデータからスタックバーを作成するためのデータセットのY軸値を抽出するにはどうすればよいですか？上記のJSONデータから手動でグラフを作成する場合は、次のようになります。

var barChartData = { 
labels: ["May 2016", "September 2016", "January 2017"], 
datasets: [{ 
    label: "Apple", 
    data: [200, 632, 0], 
    backgroundColor: "#3c8dbc" 
}, 
{ 
    label: "Mango", 
    data: [0,856,500], 
    backgroundColor: "#3c8dbc" 
}, 
{ 
    label: "Spinach", 
    data: [0,545,0], 
    backgroundColor: "#3c8dbc" 
}, 
{ 
    label: "Grapes", 
    data: [0,338,0], 
    backgroundColor: "#3c8dbc" 
}] 
}; 

私は与えられたJSONデータからデータセットのdata一部を抽出する方法が必要です。

Answer 1

このコードは（ES6の構文を使用して）問題の最も困難な部分を解決する必要があります。

const data = [{ 
 
    "date": "2016-05-01T00:00:00", 
 
    "productInformation": [{ 
 
    "productName": "Apple", 
 
    "totalWeight": 200 
 
    }] 
 
}, { 
 
    "date": "2016-09-01T00:00:00", 
 
    "productInformation": [{ 
 
    "productName": "Apple", 
 
    "totalWeight": 632 
 
    }, { 
 
    "productName": "Mango", 
 
    "totalWeight": 856 
 
    }, { 
 
    "productName": "Spinach", 
 
    "totalWeight": 545 
 
    }, { 
 
    "productName": "Grapes", 
 
    "totalWeight": 338 
 
    }] 
 
}, { 
 
    "date": "2017-01-01T00:00:00", 
 
    "productInformation": [{ 
 
    "productName": "Mango", 
 
    "totalWeight": 500 
 
    }] 
 
}] 
 

 
const uniq = a => [...new Set(a)] 
 
const flatten = a => [].concat.apply([], a) 
 

 
// step 1: find the distinct dates: ["2016-05-01T00:00:00", ... ] 
 
const dates = data.map(e => e.date) 
 

 
// step 2: find the distinct labels: [Apple, Mango, ... ] 
 
const labels = uniq(
 
    flatten(data.map(e => e.productInformation)) 
 
    .map(e => e.productName)) 
 

 
// step 3: map the labels to entries containing their data by searching the original data array 
 
const result = labels.map(label => { 
 
    return { 
 
    label, 
 
    data: dates.map(date => { 
 
     const hit = data.find(e => e.date === date) 
 
     .productInformation 
 
     .find(p => p.productName === label) 
 
     return hit ? hit.totalWeight : 0 
 
    }) 
 
    } 
 
}) 
 

 
console.log(result)