Блог

Я хотел бы сгенерировать несколько «линейных диаграмм» в виде файла изображения. Для этой цели запрашиваются данные из базы данных. Эти данные передаются в функцию формирования диаграммы отдельно для каждого линейного графика. При выводе «console.log» в начале функции правильно отображаются переданные данные. Если я запрошу тот же вывод данных в разделе «анимация: {Завершение: функция () {console.log () …}}», то я получаю только возвращенный набор данных, последний раз запрошенный из базы данных.

Кроме того, для файла изображения всегда выводится одна и та же строка (независимо от того, какие данные передаются функции).

 var imgur = new Image(); var chart_cp=document.getElementById("chart"); var chart_ctxp=chart_cp.getContext("2d"); var width=400; var height=150;  function create_trend_vsr(messstelle, date, ergeb, akl, wl, chart_cp, chart_ctxp, width, height){   var imagedataurltemp; //output given data   console.log("Messstelle");  console.log(messstelle); //returns korrect data  console.log("Datum");  console.log(date); //returns korrect data  console.log("Ergebnis");  console.log(ergeb); //returns korrect data  console.log("AKL");  console.log(akl); //returns korrect data  console.log("WL");  console.log(wl); //returns korrect data //create line-chart   var LineChart = new Chart(chart_cp, {  type: 'line',   data: {  labels: date,  datasets: [{  label: 'AKL',  data: akl,  borderColor: 'red',  borderWidth: 3,  lineTension: 0,  pointRadius:0,  fill: false  },{  label: 'WL',  data: wl,  borderColor: 'blue',  borderWidth: 3,  lineTension: 0,  pointRadius:0,  fill: false  },{  label: 'Analysis',  data: ergeb,  borderColor: 'green',  borderWidth: 1,  lineTension: 0,  pointRadius:2,  }]  },  options: {   animation: {  onComplete: function() {  chart_cp.width=width; //set width of the Canvas   chart_cp.height=height; //set width of the Canvas   imagedataurltemp= chart_cp.toDataURL("image/png");  imgur.src=LineChart.toBase64Image();  imageliste.push(imgur.src);    console.log("Messstelle");  console.log(messstelle); //returns only the last given data  console.log("Datum");  console.log(date); //returns only the last given data  console.log("Ergebnis");  console.log(ergeb); //returns only the last given data  console.log("AKL");  console.log(akl); //returns only the last given data  console.log("WL");  console.log(wl); //returns only the last given data  console.log(imageliste.length); //returns the correct amount of charts to be created  console.log(imgur.src); //always the same output ---gt; "data:image/png;base64,iVBORw0K....."  }  }   }  }); }  

В чем моя ошибка? тнх

Я решил эту проблему, создав отдельный объект canvas для каждой диаграммы.

Перед вызовом функции создания диаграммы создается новый объект canvas.

 document.getElementById("chartcontent").innerHTML  = "lt;canvas id='" messstelle "' height='150vw' width='400vw'gt;lt;/canvasgt;";  

«chartcontent» в HTML:

 lt;p id="chartcontent"gt;lt;/pgt;