生成无限数量的图表作为图像 (chart.js)

Question

我想生成几个“折线图”作为图像文件。为此，需要从数据库中请求数据。对于每个折线图，此数据分别传输到图表生成功能。在函数开头的“console.log”输出处，正确显示了传输的数据。如果我在“animation: {onComplete: function () {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 ---> "data:image/png;base64,iVBORw0K....."
                        }
                    }           
            }
    });
}

我的错误在哪里？谢谢

Answer 1

我通过为每个图表创建一个单独的 canvas 对象解决了这个问题。

在调用创建图表的函数之前，会创建一个新的canvas对象。

document.getElementById("chartcontent").innerHTML += "<canvas id='"+messstelle+"' height='150vw' width='400vw'></canvas>";

HTML 中的“图表内容”：

<p id="chartcontent"></p>

生成无限数量的图表作为图像 (chart.js)

Generate an indefinite number of charts as images (chart.js)

javascript

database

chart.js