使用 JSON 将数据从 Django 传递到 amchart JS

Question

我想将数据从我的 Django 视图传递到我的 html，然后将数据带到我的图表 js 或将数据直接传递到我的 amchart。

views.py:

def nodo_detail(request,nodo_id):
El_Nodo = Nodo.objects.get(pk=nodo_id)
all_nodos = Nodo.objects.order_by('pk').all()
var = Variable()
v = dir(var)
elemento = El_Nodo.variable_set.order_by('pk').all()
watts = elemento.last().Watts
prefix = ''
chartData = "["

for t in elemento:
    chartData += prefix
    chartData += "{\n"
    chartData += "                      date: "
    chartData += '"' + str(t.Data_time.year) + "-"
    chartData += str(t.Data_time.month) + "-"
    chartData += str(t.Data_time.day) + " "
    chartData += str(t.Data_time.hour) + ":"
    chartData += str(t.Data_time.minute) + ":"
    chartData += str(t.Data_time.second) + '"' + ",\n"
    chartData += "                  value:"
    chartData += str(t.Watts) + ",\n"
    chartData += "                  volume: "
    chartData += str(t.Watts) + "\n                      }"
    prefix = ", "
chartData += "]"

context = {'El_Nodo': El_Nodo,
           'all_nodos': all_nodos,
           'v': v,
           'watts': watts,
           'chartData':chartData,
           "asdf":json.dumps(chartData)}
return render(request, 'inicio/detail.html', context)

我要传递的数据是 chartData，使用 for 循环我尝试使用 JSON 格式，我也尝试使用 JSON python 库。

detail.html:

{% block Stock %}
<input type="hidden"  id="stock" value="{{chartData}}"> <!-- or asdf-->
{% endblock%}

amchartjs:

var chartData = JSON.parse(document.getElementById("stock").value);
 // or directly 
var chartData = JSON.parse('{{ chartData }}');//or asdf

我知道用这种方式需要刷新整个网页才能查看新数据，也想知道如何做到动态化？谢谢，抱歉英语不好

Answer 1

创建一个 AJAX 调用 returns 数组，然后将其填充到 JavaScript 中。这意味着要创建一个 JSON 视图，即 returns 一个 JSON 数组。像这样：

class QueryResultsView(generic.TemplateView):

    template_name='your_template.html'

    def get_context_data(self, **kwargs):
        # Call the base implementation first to get a context
        context = super(QueryResultsView, self).get_context_data(**kwargs)
        # Create a variable you fill
        context['my_big_sql'] = MyModel.objects.filter(blabla=blibli)
        return context

然后，在您的模板文件中（这是您的模板文件，而不是 JavaScript 文件）general_study_results.html 添加如下内容：

<script>
var myData = 
{% for row in my_big_sql %} 
    {{ row.column }}{% if not forloop.last %},{% endif %}
{% endfor %};
</script>

然后您的 HTML 文件中的所有数据都准备好通过 amchartjs 或您想要的任何库使用。

使用 JSON 将数据从 Django 传递到 amchart JS

pass data from Django to amchart JS with JSON

python

django

json

amcharts