来自django查询的饼图highcharts

Question

我是运行一个在django环境下views.py的查询。目前所有内容都是运行本地的，目的是最终将其推送到 heroku 环境中。我使用 PostgreSQL。

def test(request):
    click_results = clickstats.objects.filter(user=request.user.username, urlid=pk_int)
    data = parse_data_browser(request, click_results)
    template = get_template('index.html')
    context = {
    'data': data,
    }
    return HttpResponse(template.render(context,request))

def parse_data_browser(request,click_results):

    browsers = click_results.values('browser').annotate(browser_qty=Count('browser')).order_by()
    print("browsers")
    print(browsers)
    return browsers

parse_data_browser 的打印输出如下所示：

<QuerySet [{'browser': 'Chrome Mobile', 'browser_qty': 4}, {'browser': 'Chrome', 'browser_qty': 9}]>

挑战是让它变成这个形状：

data = [{name: 'Chrome Mobile', y: 4}, {name: 'Chrome', y: 9}]

然后使用以下脚本将其传递给我的 index.html：

<script>
    var chart_id = {{ chartID|safe }}
    var chart = {{ chart|safe }}
    var title = {{ title|safe }}
    var yAxis = {{ yAxis|safe }}
    var data = {{ data|safe }}
</script>

最后使用此脚本创建图表：

<script>
$(function () { 
    var myChart = Highcharts.chart('chartID', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{name: 'Chrome Mobile', y: 4}, {name: 'Chrome', y: 9}]
        }]
    });
});
</script>

我尝试了多种使用 dict 和 append 函数的方法，但都没有给出正确的输出。

什么是最好的方法。我宁愿不开始在我的环境中堆叠 output-json 文件，因为这似乎是一种可行的方法。

感谢帮助

Answer 1

您可以迭代查询并构建列表：

data = [{'name': item['browser'], 'y': item['browser_qty'] }
         for item in parse_data_browser_result.all() ]

这称为列表理解。

或者您仍然可以将查询集传递给模板并像这样构建数据：

data: [
    {% for item in data.all() %}
        {% if total > 0 %}
            { name: "{{ item['browser'] }}", y: {{ item['browser_qty'] }} },
        {% endif %}
    {% endfor %}
]

在 <script>.

里面

来自django查询的饼图highcharts

pie chart highcharts from django query

django

postgresql

dataformat

highcharts

pie-chart