Блог

Я получил следующий объект json из своего бэкэнда, который я хочу заполнить в многоуровневой диаграмме, используя Chart JS

 [
    {
        "user": {
            "username": "erik",
            "first_name": "erik",
            "email": "erik@admin.com"
        },
        "hours": {
            "day_1": 13.0,
            "day_2": 14.0,
            "day_3": 9.0,
            "day_4": 8.0,
            "day_5": 8.0,
            "day_6": 3.0,
            "day_7": null
        },
        "project": 21,
        "year": 2020,
        "week": 37
    },
    {
        "user": {
            "username": "mega",
            "first_name": "boy",
            "email": "mega@boy.com"
        },
        "hours": {
            "day_1": 5.0,
            "day_2": 10.0,
            "day_3": 8.0,
            "day_4": 8.0,
            "day_5": null,
            "day_6": null,
            "day_7": null
        },
        "project": 21,
        "year": 2020,
        "week": 37
    }
]
  

Мой ..data.labels JS в диаграмме добавляется вручную как ["Mon", "Tues", "Wed".... ,"Sun"] который соответствует каждому дню — теперь мне просто нужно правильно заполнить каждый day правильным значением

Есть какие-нибудь конкретные советы о том, как выполнить итерацию по этому набору данных и заполнить ....data.datasets[N].data часть диаграммы JS, как показано здесь:

             timesheetChartData: {
                type: 'bar',
                data: {
                    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
                    datasets: [ 
                        { 
                            label: 'Weekly Summary',
                            data: [], // array of what I assume will be stacked bars?
                            backgroundColor: "#2ecc71",
                            borderWidth: 1
                        },
                    ]
                },
                options: {
                    responsive: true,
                    lineTension: 1,
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                padding: 25,
                            }
                        }],
                    }
                }
            },
  

Учитывая, что ваши внутренние данные присутствуют в массиве с именем baseData , вы могли бы использовать методы Array.map() и Object.values() для генерации datasets следующим образом:

 const colors = ['green', 'red'];
const datasets = baseData.map((o, i) => ({
  label: o.user.username,
  data: Object.values(o.hours),
  backgroundColor: colors[i]
}));
  

Пожалуйста, взгляните на ваш исправленный код ниже:

 const baseData = [{
    "user": {
      "username": "erik",
      "first_name": "erik",
      "email": "erik@admin.com"
    },
    "hours": {
      "day_1": 13.0,
      "day_2": 14.0,
      "day_3": 9.0,
      "day_4": 8.0,
      "day_5": 8.0,
      "day_6": 3.0,
      "day_7": null
    },
    "project": 21,
    "year": 2020,
    "week": 37
  },
  {
    "user": {
      "username": "mega",
      "first_name": "boy",
      "email": "mega@boy.com"
    },
    "hours": {
      "day_1": 5.0,
      "day_2": 10.0,
      "day_3": 8.0,
      "day_4": 8.0,
      "day_5": null,
      "day_6": null,
      "day_7": null
    },
    "project": 21,
    "year": 2020,
    "week": 37
  }
];

const colors = ['green', 'red'];
const datasets = baseData.map((o, i) => ({
  label: o.user.username,
  data: Object.values(o.hours),
  backgroundColor: colors[i]
}));

new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
    datasets: datasets
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Weekly Summary'
    },
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true
      }]
    }
  }
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>