使用Chart JS将数据动态添加到散点图

Question

我正在使用Flask将一些数据发送到html页面，在这里我使用Chart JS可视化绘图。我需要从Flask发送到此页面的字典中动态创建散点图的数据集。有人可以给我举一个例子。

我尝试使用for循环来动态创建可以传递到图表的数据集。

{{data2}}是一个字典，它以图表js中散点图所需的格式创建。 [{x：1，y：1}，{x：2，y：2}，{x：3，y：3}，{x：4，y：4} ,. so等等]

  Chart.defaults.global.responsive = false;     

  var mydatasets = []
  for(var j = 0; j < {{data2}}.length; j++){
    mydatasets.push({ 
        label: 'Cluster 1',
        fill: false,
        showLine: false,
        lineTension: 0.1,
        backgroundColor: colorslist[j],
        boderColor: colorslist[j], // The main line color
        borderCapStyle: 'square',
        borderDash: [], // try [5, 15] for instance
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: colorslist[j],
        pointBackgroundColor: colorslist[j],
        pointBorderWidth: 1,
        pointHoverRadius: 8,
        pointHoverBackgroundColor: "yellow",
        pointHoverBorderColor: "brown",
        pointHoverBorderWidth: 2,
        pointRadius: 4,
        pointHitRadius: 10,
        // notice the gap in the data and the spanGaps: true
        data :{{data2[j]}},
        spanGaps: true,
        });
    }
    var chartData2 = {
        datasets : mydatasets
        }

  var holder = document.getElementById("myChart2");
  var ctx = document.getElementById("myChart2").getContext("2d");

  // create the chart using the chart canvas
  var myChart2 = new Chart(ctx, {
    type: 'scatter',
    data: chartData2,
    options: {
      scales: {
        xAxes: [{
          display: true,
          ticks: {
            beginAtZero: true,
            autoSkip: true,
            autoSkipPadding: 30,
            stepSize: 500,
            maxTicksLimit: 10        
          },
          scaleLabel: {
            display: true,
            labelString: 'Days',
            fontStyle: 'bold'
          }      
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Oil Rate',
            fontStyle: 'bold'
          }
        }]
      }
    }
  });

上面的代码给了我一个空白图表

我通过手动添加数据集创建了图表。但是我需要根据字典的长度动态创建数据集。