stackbar chart Dc.js - 不能显示前10名

时间:2018-01-30 20:41:43

标签: javascript charts bar-chart dc.js

我一直试图弄清楚过去的日子......我正在使用dc.js库开发堆栈栏图表。有很多尺寸(x轴),我需要显示前10名。我听说在行图中,你可以使用cap(),但其他图表不。我试图使用.data(...),但我一直在犯错误。即使我做了,

    chart.data(function(d) {
       return d.all();
    }

这是默认值,但我收到了 "无法获取财产'数据'未定义或空引用" dc.js库中的错误。我调试了它,我注意到在dc.js中,它得到了未定义的值。我在库中的这个函数中发现它。

function flattenStack() {
        var valueses = _chart.data().map(function (layer) { return layer.values; });
        return Array.prototype.concat.apply([], valueses);
    }

当我删除.data(..)函数时,我的堆栈条形图可以工作,但它的显示很多(x轴或条形)。这是我工作的代码。我希望这会有所帮助。

//Create StackBar Chart
function createStackBarChart(parent, dimension, groupHelper, dataSet){

    var chart = (dataSet == 'default') ? dc.barChart(parent) : dc.barChart(parent, dataSet);

    var group1 = groupHelper.createGroup1(dimension, groupHelper.config);
    if (groupHelper.groupOrder) {
        group1.order(groupHelper.groupOrder);
    }

    var group2 = groupHelper.createGroup2(dimension, groupHelper.config);
    /*if (groupHelper.groupOrder) {
        group2.order(groupHelper.groupOrder);
    }*/


    chart._lookup = null; // stored lookup object
    chart.lookup = function(_) { if (!arguments.length) return this._lookup; this._lookup = _; };

        chart.width(900).height(300)
           .dimension(dimension)  
           .group(group1,  'A')  //remove_empty_bins(group1)
           .stack(group2, 'B')
           .valueAccessor(function(p){ 

               return p.value.items; })
           .renderHorizontalGridLines(true)
           .renderLabel(true)
           .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100))
           .gap(5)
           .elasticX(true).elasticY(true)
           .yAxisLabel("count")
           .x(d3.scale.ordinal())
           .xUnits(dc.units.ordinal)
           .ordering(function(d) {
               return -d.value.items;
           });


/*         chart.data(function(d) {

               var getAllData = d.all();

               return getAllData;

           }); */


        chart.renderlet(function (chart) {
           // rotate x-axis labels
           chart.selectAll('g.x text')
             .attr('transform', 'translate(-10,10) rotate(315)');      
     });

        return chart;
    }

我也试过使用.ticks(10),但没有任何反应。请你能坚持我吗?我使用多个图表。所以我无法过滤前10名并将其显示在堆栈栏图表中。如何在不强制过滤其余图表的情况下显示堆栈栏图表中的前10个。我只是想展示它,我将弄清楚如何过滤它。

0 个答案:

没有答案