Question

我正在尝试使用crossfilter，dc.js和angular-dc绘制一个简单的条形图。行图工作正常。条形图不会渲染条形图。在Chrome中，如果我检查，我会看到值存在。如果我强迫对焦，我会看到图表。我已经尝试了所有的建议，但似乎有3个问题：

所有条形在x轴上从0开始。每个条的宽度为1像素。条形图不会在屏幕上呈现。

您能否为我提供上述问题的解决方案。我使用以下链接创建了我的条形图：https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html

是否存在使用angular-dc与条形图相关的任何其他链接。

以下是示例代码：


    <dependency>
    <groupId>org.codehaus.woodstox</groupId>
    <artifactId>wstx-asl</artifactId>
    <version>3.2.1</version>
    </dependency>

Answer 1

几天前我试着做同样的事情。我甚至尝试过以下链接提供的解决方案：

Angular dc.js filter issue

dc.js x axis ordinal chart issue

但这对我没有用。然后就在今天我尝试在我的控制器中使用dc.js Plain Javascript，它运行得很好。你甚至不必注射＆＃34; angularDc＆＃34;您应用中的依赖关系。

以下是我建议你应该尝试的内容：

<body ng-app="app">
<div id="England_batting" ng-controller="myController"></div>
<script>
    var app = angular.module("app", []);
    app.controller('myController', function($scope) {

        d3.json('New.json', function(error, data) {
            var data = data.Cricket;

            var ndx = crossfilter(data);
            dateDim = ndx.dimension(function(d) {
                return d.Date;
            });
            var a = dateDim.filter("abdul");
            var b = a.top(Infinity);
            var c = crossfilter(b);

            inningDim = c.dimension(function(d) {

                return d.Inning;

            });
            var d = inningDim.filter("Australia bowling");
            var e = d.top(Infinity);
            var f = crossfilter(e);

            nameDim = f.dimension(function(d) {

                return d.Name;


            });

            runName = nameDim.group().reduceSum(function(d) {

                return d.Runs;


            });


            var England_batting = dc.barChart("#England_batting");
            England_batting.width(700)
                .height(480)
                .gap(30)
                .yAxisLabel(".", 50)
                .xAxisLabel("U", 50)
                .dimension(nameDim)
                .group(runName)
                .x(d3.scale.ordinal().domain(nameDim))
                .xUnits(dc.units.ordinal)
                .y(d3.scale.linear().domain([0, 200]))
                .elasticY(true)
                .renderHorizontalGridLines(true)
                .renderTitle(true)
                .brushOn(true);
            dc.renderAll();

        });

    });
</script>

希望这可能会对你有所帮助。干杯! ：）

angular-dc条形图未渲染

1 个答案: