Question

我试图通过dc.js设置一些可视化来从django中绘制一些数据。

我正在关注codeproject.com（http://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-Using-Crossfil）的教程，但是它的图表不会在Firefox或Chrome中为我呈现。

代码在JSFiddle上：http://jsfiddle.net/e5gC2/115/ 它清楚地绘制在那里，我在我的服务器上使用完全相同的css / js文件。

我有图表的.html文件的实际来源是：

- ＆gt; - ＆GT;

    <script type="text/javascript">
        function print_filter(filter){
        var f=eval(filter);
        if (typeof(f.length) != "undefined") {}else{}
        if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
        if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
        console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
        } 

        var hitslineChart = dc.lineChart("#chart-line-hitsperday"); 

        var data = [
    {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
    {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
    {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
    {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
    {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
    {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
    {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
    {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
    ];

        var ndx = crossfilter(data); 
        var parseDate = d3.time.format("%m/%d/%Y").parse;
        data.forEach(function(d) {
    d.date = Date.parse(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
    });
        var dateDim = ndx.dimension(function(d) {return d.date;});
        var hits = dateDim.group().reduceSum(function(d) {return d.total;});
        var minDate = dateDim.bottom(1)[0].date;
        var maxDate = dateDim.top(1)[0].date;

    hitslineChart.width(500)
                     .height(200)
                 .dimension(dateDim)
                 .group(hits)
                 .x(d3.time.scale().domain([minDate,maxDate])); 
        dc.renderAll();
    </script>
</head>
<body>
    <div class="testgraph" id="testgraph"></div>
    ghfgffghghf
    <ul>
        <!-- {{ passedInContent }} -->
    </ul>
</body>

- ＆GT;

知道造成这种情况的原因是什么？

Answer 1

在DOM准备就绪之前，javascript正在运行。

dc.js无法渲染 - 适用于JSFiddle

1 个答案: