Обновление изображения диаграммы с помощью chart.js - PullRequest
Новая
       7

Обновление изображения диаграммы с помощью chart.js

0 голосов
/ 12 декабря 2018

Я делаю приложение, которое отображает ежедневные личные данные работы.Я храню данные в массиве с именем dailyTimePerProjectPerWeek, на данный момент я определяю данные за 3 недели.Я поместил две кнопки в HTML, «Предыдущая неделя» и «Следующая неделя», чтобы перемещаться между неделями.Когда страница загружается в первый раз, она показывает самую последнюю неделю, соответствующую самому высокому индексу из упомянутого выше массива.Проблема в том, что для меня визуализация данных делает что-то странное, похоже, что я создал несколько диаграмм. Как правильно обновить изображение диаграммы? Идет мой HTML-код: 

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Charts4DailyProgress</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>


<body>
<h1>Weekly Time per Project</h1>
<div id="canvas-container">
<canvas id="ctx" width="1000"></canvas>
<button type="button" onclick="decrementWeek()">Previous Week</button>
<button type="button" onclick="incrementWeek()">Next Week</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
  <script  src="js/index.js"></script>

</body>


</html>

Идет мой код JavaScript: 

var dailyTimePerProjectPerWeek =[];
dailyTimePerProjectPerWeek[0] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [300, 480, 360,180, 240, 300,480],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [60, 0, 240, 180, 120, 0, 60],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [60, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [120, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [60, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,240],
         backgroundColor: '#6cc4ee'
      }]
   }

dailyTimePerProjectPerWeek[1] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [0, 480, 360,180, 240, 300,480],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [0, 0, 240, 180, 120, 0, 60],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [0, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [0, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [0, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,240],
         backgroundColor: '#6cc4ee'
      }]
   }
dailyTimePerProjectPerWeek[2] = {
      labels: ['M', 'TU','W','TH','F','SA','SU'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'Standing costs') | data[1] = labels[1] (data for second bar - 'Running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'Master Project. Second Part',
         data: [300, 480, 360,180, 240, 300,0],
         backgroundColor: '#D4AF37'
      }, {
         label: 'Guild Ideas - Learning Angular',
         data: [60, 0, 240, 180, 120, 0, 0],
         backgroundColor: '#C0C0C0'
      }, {
         label: 'Charts For Daily Progress',
         data: [60, 180, 120, 180, 120, 120, 0],
         backgroundColor: '#133a7c'
      }, {
         label: 'Project Manager',
         data: [120, 180, 120, 120, 0],
         backgroundColor: '#109618'
      }, {
         label: 'TOOYS',
         data: [0, 180, 120, 0, 120, 0,0],
         backgroundColor: '#990099'
      }, {
         label: 'Web Pc Explorer',
         data: [0, 0, 120, 180, 0, 120, 0],
         backgroundColor: '#54161F'
      }, {
         label: 'Mind Maps Program',
         data: [0, 0, 180, 180, 0, 0, 0],
         backgroundColor: '#708238'
      }, {
         label: 'Chain System',
         data: [0, 0, 180, 0, 0, 0],
         backgroundColor: '#E86100'
      }, {
         label: 'Code Generator',
         data: [60, 0, 0, 0, 0, 0],
         backgroundColor: '#F81894'
      }, {
         label: 'Electronic Brain',
         data: [0, 0, 0, 0, 0, 0,0],
         backgroundColor: '#6cc4ee'
      }]
   }


var currentWeek = dailyTimePerProjectPerWeek.length - 1;
var weekValue = currentWeek; //At first time weekValue points to the current week

function drawData(){
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
}

function incrementWeek(){
 if(weekValue === dailyTimePerProjectPerWeek.length - 1){
   console.log("This is the current week");
 } else {
  weekValue += 1;
  drawData();
 }
}

function decrementWeek(){
 if(weekValue === 0){
   console.log("This is the oldest week of the time series");
 } else {
  weekValue -= 1;
  drawData();
 }
}



/*
function selectWeek(){

}
*/

/*
function fixWeek(){




}*/
//Main Program
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});

Правда в том,что я использую следующий код, чтобы попытаться обновить изображение: 

function drawData(){
var chart = new Chart(ctx, {
   type: 'bar',
   data: dailyTimePerProjectPerWeek[weekValue],
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xAxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yAxes: [{
            stacked: true // this also..
         }]
      }
   }
});
}

1 Ответ

0 голосов
/ 12 декабря 2018

Измените вашу drawData() функцию на: 

function drawData() {
  chart.data = dailyTimePerProjectPerWeek[weekValue];
  chart.update();
}
...