Как передать массив из представления django во внешний JS-файл для диаграммы

Я разрабатываю приборную панель, где мне нужно передать метки и данные для моей диаграммы из представлений django в переменные в Java Script. Приведенный ниже код не отображает ни таблиц, ни данных на диаграмме.

Django Views

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":labelss, "datas": datas}
    return render(request, 'charts.html',context)

Java Script для charts.html

  var chart_labels ={{labelss}};
  var chart_data ={{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,
        }]

Можно сделать следующим образом:

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 и вызвать его из JS, используя fetch.

Вернуться на верх