Chart.js 中带有 JSON 数据的堆积条形图答案

【问题标题】：Stacked bar charts in Chart.js with JSON dataChart.js 中带有 JSON 数据的堆积条形图
【发布时间】：2017-02-02 12:13:35
【问题描述】：

我有以下 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-05 只有 Apple 所以它只会显示 apple。 2016-09 年有 4 种产品，因此它将根据 4 种产品及其总重量显示 4 根桩棒。我已阅读 chart.js 文档。根据文档，我必须在数据集中提供 Y 轴值。如何提取数据集的 Y 轴值以从给定的 JSON 数据创建堆叠条？如果我想从上面给出的 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 部分数据集的方法。

【问题讨论】：

标签： javascript chart.js chart.js2

【解决方案1】：

这个 sn-p 应该解决你问题中最难的部分（使用 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)

【讨论】：