Javascript 用highcharts在django中绘制饼图_Javascript_Css_Django_Twitter Bootstrap_Highcharts

Javascript 用highcharts在django中绘制饼图

javascript css django twitter-bootstrap highcharts

Javascript 用highcharts在django中绘制饼图,javascript,css,django,twitter-bootstrap,highcharts,Javascript,Css,Django,Twitter Bootstrap,Highcharts,我试图用django绘制饼图。我的django模型“结果”有两个字段，如下所示： +--------+------------+ | result | date | +--------+------------+ | passed | 2017-03-30 | | passed | 2017-02-30 | | passed | 2017-03-30 | | failed | 2017-03-30 | | failed | 2017-03-29 | | passed | 20

我试图用django绘制饼图。我的django模型“结果”有两个字段，如下所示：

+--------+------------+
| result |    date    | 
+--------+------------+
| passed | 2017-03-30 | 
| passed | 2017-02-30 | 
| passed | 2017-03-30 | 
| failed | 2017-03-30 |
| failed | 2017-03-29 |
| passed | 2017-03-29 | 
| passed | 2017-03-30 | 
-----------------------

我想用下面的方法计算，并在饼图中显示通过和失败值的总数

2017-03-30通过-4和失败-1

chart_test.html：

{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(function () {
        $('#chart_container').highcharts({
        chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'hello'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [
          {% for cat in responses_pie %}
            [
            {{ cat.count }} 
            ],
            {% endfor %}
            ]
    }]
        });
        });
    </script>
    <div id="chart_container" style="height: 300px"></div>
</body>
{% endblock %}

我建议使用外部应用程序（与Highcharts集成）。我建议使用chartkick。只需将元组列表传递给视图，然后让应用程序呈现图表。例如：

在模板中使用：

{% pie_chart browser_stats %}

这里是结果

工作越少，表现越好

：）

My django web是动态的。值不是常量。我想从mysql数据库中绘制饼图。始终可以使用chartkick创建动态图表（我知道，因为我做了一项工作），只需创建查询集以提取所需的值，如：

yourmodel.objects.values\u list（'date'，'count'））

或提取所有数据，并创建应用程序所需的元组列表。您必须正确获取

响应

，那么{{cat.count}中的值是多少

browser_stats = [('Chrome', 52.9), ('Firefox', 27.7), ('Opera', 1.6),
                 ('Internet Explorer', 12.6), ('Safari', 4)]

{% pie_chart browser_stats %}