如何将数组从 django 视图传递到图表的外部 JS 文件答案

【问题标题】：How to pass an array from django views to external JS file for chart如何将数组从 django 视图传递到图表的外部 JS 文件
【发布时间】：2021-12-24 05:30:45
【问题描述】：

我正在设计一个仪表板，我需要将标签和数据从 django 视图传递到我的图表到 Java Script 中的变量。以下代码未在图表中显示标签或数据。

当我将值直接传递给 JS 时，它可以工作。但是当通过views.py传递相同的值时，它会在控制台中引发错误，例如：（jQuery.Deferred 异常：无法读取 null 的属性（读取 'getContext'）TypeError：无法读取 null 的属性（读取 'getContext'））

Django 视图

def chartd(request):
    labelss=["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    datas = [170, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, 'charts.html',context)

charts.html 的 Java 脚本

  var chart_labels =JSON.parse('{{labelss}}');
  var chart_data =JSON.parse('{{datas}}');

    var ctx = document.getElementById("chartBig1").getContext('2d');

    var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.1)');
    gradientStroke.addColorStop(0.4, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
    var config = {
      type: 'line',
      data: {
        labels: chart_labels,
        datasets: [{
          label: "My First dataset",
          fill: true,
          backgroundColor: gradientStroke,
          borderColor: '#d346b1',
          borderWidth: 2,
          borderDash: [],
          borderDashOffset: 0.0,
          pointBackgroundColor: '#d346b1',
          pointBorderColor: 'rgba(255,255,255,0)',
          pointHoverBackgroundColor: '#d346b1',
          pointBorderWidth: 20,
          pointHoverRadius: 4,
          pointHoverBorderWidth: 15,
          pointRadius: 4,
          data: chart_data
        }]
      }
      options: gradientChartOptionsConfigurationWithTooltipPurple
    };
    var myChartData = new Chart(ctx, config);
    $("#0").click(function() {
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });
    $("#1").click(function() {
      var chart_data = [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120];
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });

    $("#2").click(function() {
      var chart_data = [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130];
      var data = myChartData.config.data;
      data.datasets[0].data = chart_data;
      data.labels = chart_labels;
      myChartData.update();
    });

【问题讨论】：

这能回答你的问题吗？ Python list does not work in django with ChartJS
另一个：stackoverflow.com/questions/66164015/…
我什么都试过了！它只返回空字符串给 JS...

标签： javascript html django charts django-views

【解决方案1】：

可以这样做：

def chartd(request):
    labelss=['JANS', 'FEBS', 'MARS', 'APRS', 'MAYS', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
    datas = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, 'charts.html',context)

labelss 和 datas 现在是 json 字符串

<script>
var chart_labels =JSON.parse('{{labelss}}');
var chart_data =JSON.parse('{{datas}}');
</script>

在 JS/HTMl 文件中，您会将 json 字符串转换回对象。

但更好的方法是创建返回 JsonResponse 的视图并使用 fetch 从 JS 调用它。

更新：测试视图中的数据是否与手动设置的数据相同（用于测试）。

<script>
  // from Django's view
  var chart_labels = JSON.parse('{{labelss}}');
  var chart_data = JSON.parse('{{datas}}');

  // manually set
  var chart_labels2 = ["JANS", "FEBS", "MARS", "APRS", "MAYS", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
  var chart_data2 = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100];

  // check if same
  console.log(JSON.stringify(chart_labels) === JSON.stringify(chart_labels2));
  // returns true
  console.log(JSON.stringify(chart_data) === JSON.stringify(chart_data2));
  // returns true
</script>

正常工作示例：

views.py

def chartd(request):
    labelss = ["JANS", "FEBS", "MARS", "APRS", "MAYS", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]
    datas = [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100]
    context = {"labelss": mark_safe(json.dumps(labelss)), "datas": mark_safe(json.dumps(datas))}
    return render(request, "charts.html", context)

charts.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
</head>
<body>

<canvas id="chart1"></canvas>
<script>
  // from Django's view
  var chart_labels = JSON.parse('{{labelss}}');
  var chart_data = JSON.parse('{{datas}}');

  var ctx = document.getElementById("chart1").getContext('2d');
  var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);
  gradientStroke.addColorStop(1, "rgba(72,72,176,0.1)");
  gradientStroke.addColorStop(0.4, "rgba(72,72,176,0.0)");
  gradientStroke.addColorStop(0, "rgba(119,52,169,0)"); //purple colors
  var config = {
    type: "line",
    data: {
      labels: chart_labels,
      datasets: [{
        label: "dataset",
        fill: true,
        backgroundColor: gradientStroke,
        borderColor: "#d346b1",
        borderWidth: 2,
        borderDash: [],
        borderDashOffset: 0.0,
        pointBackgroundColor: "#d346b1",
        pointBorderColor: "rgba(255,255,255,0)",
        pointHoverBackgroundColor: "#d346b1",
        pointBorderWidth: 20,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 15,
        pointRadius: 4,
        data: chart_data
      }]
    }
  };
  new Chart(ctx, config);
</script>

</body>
</html>

结果：

【讨论】：

这不起作用。当它保存在 var chart_labels 和图表数据中时，它应该与 ['JANS', 'FEBS', 'MARS', 'APRS', 'MAYS', 'JUN', 'JUL', 'AUG', 'SEP ', 'OCT', 'NOV', 'DEC'] , [120, 123, 125, 90, 92, 70, 75, 60, 90, 80, 110, 100] 数据类型或图表不获取这些值
@harishkrishna 就像您手动设置一样。如果您手动设置这些值，请检查您的图表是否有效，因为视图中的数据是有效的。我更新了我的答案，所以你可以看到它。
嗨，请检查一下。当我手动给出相同的值时，它可以工作，但从控制台中查看它的错误：（charts.html:1296 Uncaught SyntaxError: Unexpected identifier）
控制台日志信息给出空字符串 " " @zelenyjan
如果你知道 JsonResponse，请帮我在这个场景中使用它。