Блог

Я пытаюсь нарисовать диаграмму с помощью Morris.line. Мне нужно нарисовать пару из них, поэтому я пытаюсь динамически создавать диаграмму с помощью цикла for .

Template.html — тело

 {% for data in datas %}

                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header" id="test">
                            <input type="hidden" id="myVar" name="variable" value="{{ data.data|safe}}">
                                <h5>{{data.id}}</h5>
                            </div>
                            <div class="card-block">
                                <div id="myfirstchart" style="height:300px"></div>
                            </div>
                        </div>
                    </div>
{% endfor %}
  

Template.html — Сценарии

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var myVar = document.getElementById("myVar").value;
        new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',
            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: myVar,
            // The name of the data record attribute that contains x-values.
            xkey: 'day',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['value'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Value']
        })
    });
</script>
  

вот мое мнение:

 def data_chart(request):
   markets = Markets.objects.all().filter(~Q(spider=5))
   cutoff = datetime.date.today() - datetime.timedelta(days=7)
   datas = []
   for market in markets:
      raw_data = (
         Products.objects.filter(created_dates__gte=cutoff)
         .values_list("created_dates__date")
         .filter(market=market.id)
         .annotate(count=Count("id"))
         .values_list("created_dates__date", "count")
      )

      data = [{"day": str(day), "value": value} for (day, value) in raw_data]

      market_data = {"id":market.id,"data":data}
      datas.append(market_data)

   return render(request, "chartpage.html", {"datas": datas})
  

Я пытаюсь, и в моем представлении нет ошибок. На случай, если я его добавлю.

Я получаю Uncaught TypeError: Cannot read property 'match' of undefined сообщение об ошибке в «new Morris.Line». Как я могу решить эту проблему?

Вы должны возвращать json obj, а не string . Вы можете попробовать приведенные ниже строки кода и предоставить data_list в качестве данных диаграмму.

 myVar = document.getElementById("myVar").value;
var data_list = eval(myVar);