Question

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

酒吧从0开始
宽度为1像素
条形图未在屏幕上呈现

任何指针？

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Pie Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="public/lib/dcjs/web/css/dc.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type="text/javascript" src="public/lib/d3/d3.js"></script>
    <script type="text/javascript" src="public/lib/crossfilter/crossfilter.js"></script>
    <script type="text/javascript" src="public/lib/dcjs/dc.js"></script>
    <script type="text/javascript" src="public/lib/angular/angular.js"></script>
    <script type="text/javascript" src="public/lib/angular-dc/dist/angular-dc.js"></script>
</head>
<body ng-app="app">
<!-- we nicely separate the view and the data. Here, all information concerning the way to display the data
is in the template -->
<div ng-controller="myController">
    <div dc-chart="pieChart"
         dc-chart-group="1"
         dc-width="780"
         dc-height="480"
         dc-inner-radius="100"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-legend="dc.legend()">
    </div>
    <div dc-chart="barChart"
         dc-width="780"
         dc-height="480"
         dc-dimension="fruit"
         dc-group="fruitSales"
         dc-x="d3.scale.ordinal().domain(['','Apple','Banana'])"
         dc-xUnits ="dc-units-ordinal"
         dc-elastic-y="true"
         dc-center-bar="true"
         dc-gap="1"
         dc-bar-padding="0.5"
         dc-xAxisPadding="50"
         dc-legend="dc.legend()">
    </div>
    </div>
</div>
<script type="text/javascript">
    angular.module("app", ["angularDc"]);
    myController = function($scope) {
            var fruitCf =  crossfilter([
                {Name: 'Apple', Sales: 40},
                {Name: 'Apple', Sales: 40},
                {Name: 'Banana', Sales: 20}]);
            $scope.fruit  = fruitCf.dimension(function(d) {return d.Name;});
            $scope.fruitSales = $scope.fruit.group().reduceSum(function(d) {return d.Sales;});
            //$scope.$apply()
        };
</script>
</body>
</html>

Answer 1

我无法找到解决这个问题的方法但是我们所做的另一种积分直流和角度的方法是通过角度范围将数据输入到交叉滤波器，并像在dc中一样对代码进行编码并将它们设置为通过调用div来调用html。我们没有注意到使用此方法降级任何性能。

dc.js x轴序数图问题

1 个答案: