Question

我被困在使用django

将dict的数据传递给高图

这是我的views.py代码。我的想法是尝试将数据库的数据传递给字典data，然后将其传递给user_chart.html's highchairs

def user_chart(request):

    user_data = User_Data.objects.filter(user=request.user.username)
    data = {'words':[], 'click_times':[]}
    for i in user_data:
        data['words'].append(i.word)
        data['click_times'].append(i.click_times)

    xAxis = {"title": {"text": 'ss'}, 'categories': data['words']}
    yAxis = {"title": {'text': 'fdfd'}}
    series = [
        {"name": 'dfdf', "data": data['click_times']}
    ]
    content = {'xAxis': xAxis, 'yAxis': yAxis, 'series': series}
    return render(request, 'yigu/user_chart.html', content)

user_chart.html的代码。我想实现一个目标，即highchart接收数据，然后将其显示为图表。

{% extends 'yigu/base_charts.html' %}

{% block body_block %}

<div class="container">
  <div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1"></div>
    <div class="col-md-1">
      <div id="chart1" style="width:450px">
          &nbsp;
      </div>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>
<script>
  var xAxis = {{ xAxis|safe }}
  var yAxis = {{ yAxis|safe }}
  var series = {{ series|safe }}
</script>
<script>

$(document).ready(function(){

    $("#chart1").highcharts({
            chart: {
          type: 'column'
      },
      title: {
          text: '搜索频率'
      },
      xAxis: xAxis,
      yAxis: yAxis,
      series: series
  });
});
</script>
{% endblock %}

但我得到了空白的反应，图表并没有显示出来。有人可以帮我一把吗？

Answer 1

阅读http://blogs.law.harvard.edu/rprasad/2011/08/30/highcharts-django-admin/之后，我注意到categories: [ '{{ categories|join:"','" }}']而且我想也许我应该尝试这种类型。然后我将我的模板更改为下面的内容

<script>
$(document).ready(function(){

    $("#chart1").highcharts({
            chart: {
          type: 'column'
      },
      title: {
          text: '搜索频率'
      },
      xAxis: {
          title:{
            text: '词条',
          },
          categories: [ '{{ data.words|join:"','"}}']
      },
      yAxis: {
          title:{
            text: '次数'
          }
      },
      series:[{
          name:'搜索次数',
          data:[{{ data.click_times|join:"," }}]
      }]
  });
});
</script>

然后一切顺利。我很惊讶。我希望解决方案可以帮助某人。

使用django呈现highcharts时出错了

1 个答案: