Question

我是这个论坛的新手，Meteor和Dc.js，我想在我正在工作的项目中添加一些图表，所以我找到了这样做的好教程{{3} }，我试图适应流星，我通过第一部分没有问题，但我在第二部分面临一个问题，因为我做了一切，但我看不到图表，控制台没有错误，但没有发生。

这是我的代码部分：

chart1.html

<div id="chart-line-hitsperday"></div>
<div id="chart-ring-year"></div>
{{exemple1}}

chart1.js

    Template.chart1.helpers({
    'exemple1' : function(){

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

        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 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 = parseDate(d.date);
            d.total= d.http_404+d.http_200+d.http_302;
        });
        print_filter("data");



        var dateDim = ndx.dimension(function(d) {return d.date;});
        var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
        //var hits = dateDim.group().reduceSum(dc.pluck('total')); 

        print_filter("dateDim");  
        dateDim.filterAll();

        print_filter("hits");  

        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(); 


    }
});

和包含第一个模板的主模板： pdv.html

    <template name="pdv">
           ...
      {{>chart1}}
    </template>

请帮助我!!

使用dc-js，d3.js和crossfilter

0 个答案: