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

Javascript Pie Chart in Django App - Problems displaying dynamic data

本文关键字：动态 显示 数据 问题 饼图 应用 Javascript Django      更新时间：2023-09-26

我弄不明白:我有一个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
            }
    });
});

我认为问题出在

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

None不是一个有效的js表达式

编辑:为了避免"无问题"，你应该在你的模板中有这样的内容:

{ label: "{{ cat }}",  data: {% if count %} {{ count }}} {% else %} 0 {% endif %},
相关文章：