来自django查询的饼图高图

时间:2017-08-10 14:17:19

标签: django postgresql highcharts pie-chart dataformat

我在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和附加函数尝试了多个东西,但没有任何东西可以提供正确的输出。

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

感谢您的帮助

1 个答案:

答案 0 :(得分:1)

您可以迭代查询并构建一个列表:

Color

这称为列表理解。

或者您仍然可以将查询集传递给模板并构建如下数据:

@Override
public Component getTableCellRendererComponent(JTable table, Object value,
        boolean isSelected, boolean hasFocus, int row, int column) {
    Component comp = super.getTableCellRendererComponent(table, value,
            isSelected, hasFocus, row, column);

    Color color = map.get(row);
    if (color != null) {
        comp.setBackground(color);
    }

    return comp;
}

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