Django 应用程序中的 Javascript 饼图 - 显示动态数据的问题

Question

我无法弄清楚这一点:我有一个 Django 应用程序，并且在索引页面的模板上有一些 JavaScript 代码来制作饼图。我不太了解 JavaScript，但从某处获取了一些代码并且它可以工作。我的问题是，当我直接输入数据时，代码可以工作，但是当我尝试动态获取数据时，饼图就会消失。

令我困惑的是，当我查看页面源代码时，数据就在那里。它已成功从数据库中提取数据并将其设置为图表数据的正确格式。所以看起来它应该可以工作。

下面是页面源代码:第一行数据是动态生成的数据，然后后面的数据(被注释掉)是静态类型的数据。如果我注释掉动态的，并取消注释静态的，饼图就在那里。反之亦然，它就会消失。这两组数据在我看来完全一样——其中一组是怎么回事？

$(function () {
    // data
    var data = [

        { label: "Blogs",  data: 87102},

        { label: "Conversation (Phone)",  data: 2652},

        { label: "Folktales",  data: 47981},

        { label: "Internet Forums",  data: 75900},

        { label: "Jokes",  data: 5833},

        { label: "Literature",  data: None},

        { label: "Opinion",  data: 19231},

        { label: "Plays",  data: 9512},

        { label: "Poem",  data: 404},

        { label: "Political Speeches",  data: 733},

        { label: "Proverbs",  data: 1081},

        { label: "Radio",  data: 13774},

        { label: "Recipes",  data: 215},

        { label: "Songs",  data: 3161},

        { label: "Sports",  data: 8732},

        { label: "Television (Drama)",  data: 142029},

        { label: "Web",  data: 336919},

        // { label: "Web",  data: 337972},
        // { label: "Television",  data: 142029},
        // { label: "Blogs",  data: 86049},
        // { label: "Internet Forums",  data: 74058},
        // { label: "Folktales",  data: 30698},
        // { label: "Opinion",  data: 19231},
        // { label: "Plays",  data: 9512},
        // { label: "Sports",  data: 8732},
        // { label: "Radio (News)",  data: 7438},
        // { label: "Radio (Interviews)",  data: 6286},
        // { label: "Jokes",  data: 5833},
        // { label: "Songs",  data: 3161},
        // { label: "Conversation (Phone)",  data: 2652},
        // { label: "Proverbs",  data: 1081},
        // { label: "Political Speeches",  data: 733},
        // { label: "Poem",  data: 404},
        // { label: "Recipes",  data: 215},
        // { label: "Radio (Listener Responses)",  data: 53},

    ];

这是图表的完整代码，以防您需要:

{% block javascript %}
        <script language="javascript" type="text/javascript" src="/media/js/flot/jquery.flot.js"></script>
        <script language="javascript" type="text/javascript" src="/media/js/flot/jquery.flot.pie.js"></script>

        <script type="text/javascript">
$(function () {
    // data
    var data = [
        {% for cat,count in cat_wordcount %}
        { label: "{{ cat }}",  data: {{ count }}},
        {% endfor %}
        // { label: "Web",  data: 337972},
        // { label: "Television",  data: 142029},
        // { label: "Blogs",  data: 86049},
        // { label: "Internet Forums",  data: 74058},
        // { label: "Folktales",  data: 30698},
        // { label: "Opinion",  data: 19231},
        // { label: "Plays",  data: 9512},
        // { label: "Sports",  data: 8732},
        // { label: "Radio (News)",  data: 7438},
        // { label: "Radio (Interviews)",  data: 6286},
        // { label: "Jokes",  data: 5833},
        // { label: "Songs",  data: 3161},
        // { label: "Conversation (Phone)",  data: 2652},
        // { label: "Proverbs",  data: 1081},
        // { label: "Political Speeches",  data: 733},
        // { label: "Poem",  data: 404},
        // { label: "Recipes",  data: 215},
        // { label: "Radio (Listener Responses)",  data: 53},

    ];

    var series = Math.floor(Math.random()*10)+1;

    // GRAPH 7
     $.plot($("#graph7"), data,
    {
            series: {
                pie: {
                    show: true,
                    combine: {
                        color: '#999',
                        threshold: 0.03
                    }
                }
            },
            legend: {
                show: false
            }
    });

});

Answer 1

我认为问题出在

{ label: "Literature",  data: None},

None 不是有效的 js 表达式

编辑:为了避免“无”问题，您的模板中应该有类似的内容:

{ label: "{{ cat }}",  data: {% if count %} {{ count }}} {% else %} 0 {% endif %},