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 %},

Django App中的Javascript饼图 - 显示动态数据的问题

1 个答案: