javascript - Charts.js 中来自 JSON 对象列表的堆叠条形图

Question

我正在尝试从 json 对象列表创建一个带有堆叠条形图的 Charts.js，但没有成功...

我的json是

   [{
    "machine": {
        "machineId": 1,
        "name": "a",
        "description": "aaaaaa",
        "active": true,
        "direction": "IN"
    },
    "realEnergy": 56.99,
    "lastUpdate": "2018-10-16 09:00:00"
 }, {
    "machine": {
        "machineId": 2,
        "name": "ABCD 1",
        "description": "ABCD 1",
        "active": true,
        "direction": "OUT"
    },
    "realEnergy": 62.11,
    "lastUpdate": "2018-10-16 09:00:00"
 }, {
    "machine": {
        "machineId": 1,
        "name": "M1",
        "description": "Machine M1",
        "active": true,
        "direction": "IN"
    },
    "realEnergy": 57.11,
    "lastUpdate": "2018-10-16 09:30:00"
 }, {
    "machine": {
        "machineId": 2,
        "name": "ABCD 1",
        "description": "ABCD 1",
        "active": true,
        "direction": "OUT"
    },
    "realEnergy": 62.14,
    "lastUpdate": "2018-10-16 09:30:00"
 }, {
    "machine": {
        "machineId": 1,
        "name": "M1",
        "description": "Machine M1",
        "active": true,
        "direction": "IN"
    },
    "realEnergy": 58.18,
    "lastUpdate": "2018-10-16 10:00:00"
 }, {
    "machine": {
        "machineId": 2,
        "name": "ABCD 1",
        "description": "ABCD 1",
        "active": true,
        "direction": "OUT"
    },
    "realEnergy": 71.11,
    "lastUpdate": "2018-10-16 10:00:00"
 }, {
    "machine": {
        "machineId": 1,
        "name": "M1",
        "description": "Machine M1",
        "active": true,
        "direction": "IN"
    },
    "realEnergy": 64.11,
    "lastUpdate": "2018-10-16 10:30:00"
 }, {
    "machine": {
        "machineId": 2,
        "name": "ABCD 1",
        "description": "ABCD 1",
        "active": true,
        "direction": "OUT"
    },
    "realEnergy": 72.11,
    "lastUpdate": "2018-10-16 10:30:00"
 }]

我希望在标签上有lastUpdate，并为条形堆叠realEnergy 值。我试图采用这个 json 来匹配 Charts.js 数据集，但没有成功。

var size = Object.keys(json).length ;
            labels = response.map(function(e) {
                   return e.lastUpdate;
                });
for(var i = 0; i < size; i++){
                 datasetValue[i] = {
                            fillColor: 'rgba(220,220,220,0.5)',
                            strokeColor :'rgba(220,220,220,1)',
                            label :json[i].machine.name,
                            data : json[i].realEnergy
                        }
            }

var myData = {
                    datasets : datasetValue
                }

var myChart = new Chart(ctx, {
                    type: 'bar',
                    data:  {
                        labels: labels,
                        datasets:myData
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                 stacked: true
                            }],
                            xAxes: [{
                                stacked: true
                            }]
                        }
                    }
                });  
        }

我可以正确获取标签，但上面没有数据，无法理解应如何创建数据集值。

Answer 1

数据集的数据属性是一个值数组，它将分布在标签上(在本例中为每个最后更新的真实能量值)。我假设每个数据集应该代表特定的机器。

以下是根据 JSON 数据生成数据集和标签的代码:

const jsonData = JSON.parse(yourJSONData);
const colors = ['yellow', 'green', 'blue']; // purely optional


const machines = jsonData.reduce((uniqueMachines, record) => {
  // find unique machines that will be base to our datasets
  if (!uniqueMachines.find(machine => machine.machineId === record.machine.machineId))
    uniqueMachines.push(record.machine);
  return uniqueMachines;
}, []);

const lastUpdates = jsonData.reduce((uniqueLastUpdates, record) => {
  // get labels for our chart
  if (!uniqueLastUpdates.find(lastUpdate => lastUpdate === record.lastUpdate))
    uniqueLastUpdates.push(record.lastUpdate);
  return uniqueLastUpdates;
}, []);

const datasets = machines.map((machine, index) => {
  const label = machine.name;
  const backgroundColor = colors[index]; // purely optional
  const data = lastUpdates.map(lastUpdate => {
    const valueRecord = jsonData.find(record => record.machine.machineId === machine.machineId && record.lastUpdate === lastUpdate);
    if (!valueRecord) return 0;  // if value record is not defined, return 0;
    return valueRecord.realEnergy;
  });

  return {
    // here we return dataset
    label,
    backgroundColor,
    data,
    stack: 'main' // here we define the stack
  };
});

这是图表的最终配置:

const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: lastUpdates,
    datasets
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true
      }]
    }
  }
});

JSFiddle 上的工作示例:click