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

Dataset的data属性是将在标签之间分布的值的数组（在这种情况下，每个lastUpdate的realEnergy值）。我假设每个数据集都应代表特定的计算机。

以下是根据您的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

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

1 个答案: