如何将 Django-Template 变量发送到 Morris.Line 数据变量？答案

【问题标题】：How to send Django-Template variable to Morris.Line data variable?如何将 Django-Template 变量发送到 Morris.Line 数据变量？
【发布时间】：2020-10-21 16:24:50
【问题描述】：

我正在尝试使用 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 “新莫里斯线”中的错误。我该如何解决这个问题？

【问题讨论】：

标签： javascript html django django-templates

【解决方案1】：

你必须返回 json obj，而不是字符串。您可以尝试下面的代码行并将data_list 作为数据提供给图表。

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

【讨论】：