Hoàn thành thực hiện chức năng biểu đồ biểu diễn dữ liệu

[tuanhcmute]

Hoàn thành thực hiện chức năng biểu đồ biểu diễn dữ liệu #34

1. Code hiện thực chức năng

• File script.html

  const dataString = $('.data').text().replace(/'/g, '"');
  const dataObj = JSON.parse(dataString)
  
  function randomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
  }
  
  function getDataForChart1AndChart2() {
  const labels = [ ...Array(31).keys() ].map(item => {
        return item + 1 < 10 ? `2022-12-0${item + 1}` : `2022-12-${item + 1}`
      });
  
  let datasets = {}
  labels.forEach(item => {
    datasets = {
      ...datasets,
    }
  })
  
  Object.keys(dataObj).forEach(key1 => {
    Object.keys(dataObj[key1]).forEach((key2, index) => {
        // console.log(dataObj[key1][key2])
        const date = dataObj[key1][key2]['date'].slice(0, 10).trim();
        datasets = {
          ...datasets,
          [date]: datasets[date] + 1
        }
    })
  
  })
  .....

2. Hình ảnh demo

[mytranchi]

Hoàn thành thực hiện chức năng biểu diễn biểu đồ

• Nhóm em sử dụng Chartjs để vẽ các biểu đồ Chartjs là một thư viện JavaScript mã nguồn mở được sử dụng để tạo ra các biểu đồ trực quan và đẹp mắt trên các trang web và ứng dụng web. Thư viện này cung cấp các công cụ và API để tạo ra các loại biểu đồ phổ biến như biểu đồ đường, biểu đồ cột, biểu đồ tròn, biểu đồ ghép cột, biểu đồ radar và nhiều loại biểu đồ khác.

• Đây là một số chart đã được vẽ