时间戳

首页 > 解决方案 > 带有 JSON 列表变量的 ChartJS 散点图不起作用

javascript - 带有 JSON 列表变量的 ChartJS 散点图不起作用

问题描述

我想从 Flask 传递的 JSON 变量（列表列表；以 Chart JS 散点图所需的格式）绘制散点图。

render_template('chart.html',data2 = data2)

当我使用 jinja 变量 {{data2}} 手动创建数据集时，以下代码正在工作：

var chartData = {
        datasets : [{
            label: 'Cluster 1',
            fill: false,
            showLine: false,
            lineTension: 0.1,
            backgroundColor: "green",
            borderColor: "black", // The main line color
            borderCapStyle: 'square',
            borderDash: [], // try [5, 15] for instance
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "green",
            pointBackgroundColor: "green",
            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[0]}},
            spanGaps: true,
        },
        {
            label: 'Cluster 2',
            fill: false,
            showLine: false,
            lineTension: 0.1,
            backgroundColor: "blue",
            borderColor: "black", // The main line color
            borderCapStyle: 'square',
            borderDash: [], // try [5, 15] for instance
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "blue",
            pointBackgroundColor: "blue",
            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[1]}},
            spanGaps: true,
        },
        {
            label: 'Cluster 3',
            fill: false,
            showLine: false,
            lineTension: 0.1,
            backgroundColor: "red",
            borderColor: "black", // The main line color
            borderCapStyle: 'square',
            borderDash: [], // try [5, 15] for instance
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "red",
            pointBackgroundColor: "red",
            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[2]}},
            spanGaps: true,
        },.....so on

 // get chart canvas
      var holder = document.getElementById("myChart2");
      var ctx = document.getElementById("myChart2").getContext("2d");

      // create the chart using the chart canvas
      var myChart = new Chart(ctx, {
        type: 'scatter',
        data: chartData,
        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'
              }
            }]
          }
        }
      });

但是当我使用 tojson 并在 for 循环中使用相同的变量时，它不起作用（呈现空白图表）：

var ds = []    
var d2 = {{data2|tojson}}
      for (var j=0; j < {{o}}; j++){
      ds.push ({
            label: 'Cluster' +j,
            fill: false,
            showLine: false,
            lineTension: 0.1,
            backgroundColor: colorlist[j],
            borderColor: colorlist[j], // The main line color
            borderCapStyle: 'square',
            borderDash: [], // try [5, 15] for instance
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "green",
            pointBackgroundColor: "green",
            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 :d2[j],
            spanGaps: true,
        });
        }     
      var chartData2 = {
        datasets : ds
       }

      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'
              }
            }]
          }
        }
      });

为了更清楚起见，这就是我的 data2 是如何为散点图 js 创建的：

x2 = {}
y2 = {}
data = {}
for i in n:
   x2[i] = list(df_no_anamolies['Days'[df_no_anamolies["clusters_oilvsDays"]==i])
   y2[i] = list(df_no_anamolies['Oil_rate(stb/d)'[df_no_anamolies["clusters_oilvsDays"]==i])
   T = []
   for j,k in zip(x2[i],y2[i]):
      T.append({'x': j, 'y': k})
   data[i] = str(T).replace('\'', '')
dt2 = list(data.items())
data2 = []
for i in range(len(dt2)):
    data2.append(dt2[i][1])

这就是我的 data2 的样子：

['[{x: 429, y: 21862.782000000003}, {x: 430, y: 21769.1868}]', 
 '[{x: 431, y: 21752.5183}, {x: 432, y: 21406.0022}]', 
 '[{x: 433, y: 20823.7369},'[{x: 434, y: 21101.5033}]', 
 '[{x: 435, y: 22031.354}, {x: 434, y: 21101.5033}]'....]

有人可以帮助我如何使用循环执行此操作。

标签： javascriptflaskchart.js

解决方案

我认为您需要先解析这些 json 字符串，然后再将它们传递给 chart.js

var chartData2 = {
        datasets : [{label: 'Cluster 1',
            fill: false,
            showLine: false,
            lineTension: 0.1,
            backgroundColor: "green",
            borderColor: "black",
            borderCapStyle: 'square',
            borderDash: [], 
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "green",
            pointBackgroundColor: "green",
            pointBorderWidth: 1,
            pointHoverRadius: 8,
            pointHoverBackgroundColor: "yellow",
            pointHoverBorderColor: "brown",
            pointHoverBorderWidth: 2,
            pointRadius: 4,
            pointHitRadius: 10,
            data : JSON.parse( {{ data[1] }} ),
            spanGaps: true,
       }]      
}

推荐阅读