angular-dc Bar diagrammasi ko'rsatilmaydi

Men crossfilter, dc.js va angular-dc yordamida oddiy chiziqli diagramma chizishga harakat qilyapman. Qator diagrammasi yaxshi ishlaydi. Barkart barlarni ko'rsatmaydi. Chrome brauzerida tekshirsam, qiymatlar borligini ko'raman. va agar men diqqatni jamlashga majbur qilsam, jadvallarni ko'raman. Men barcha takliflarni sinab ko'rdim, lekin 3 ta muammo borga o'xshaydi:

Barcha chiziqlar x o'qi bo'yicha 0 dan boshlanadi. Har bir satrning kengligi 1 piksel. Barlar ekranda ko'rsatilmaydi.

Yuqoridagi savolga yechim bera olasizmi? Men barchartimni yaratish uchun quyidagi havoladan foydalandim: https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html

Angular-dc yordamida chiziqli diagramma bilan bog'liq boshqa havola bormi?

Mana namuna kodi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>dc.js - Pie Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/uzpublic/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>

javascript css angularjs dc.js
person Aarti Gupta    schedule 21.05.2015    source manba
comment
HTML-da diagrammalarning xususiyatlarini qattiq kodlash yaxshi uslub emas. Muammoingizni hali hal qildingizmi? Agar shunday bo'lsa, siz javob yoki sharh yozishingiz kerak   -  person Ben Leitner    schedule 13.07.2015

Javoblar (1)


arrow_upward
2
arrow_downward

bir necha kun oldin men ham xuddi shunday qilishga harakat qildim. Men hatto quyidagi havolalarda taqdim etilgan yechimni sinab ko'rdim:

Dc.js burchakli filtr muammosi

dc.js x eksa tartib diagrammasi muammosi

lekin bu men uchun ishlamadi. Keyin bugun men kontrollerim ichida dc.js Plain Javascript dan foydalanishga harakat qildim va u mukammal ishladi. Ilovangizga "angularDc" qaramligini kiritishingiz shart emas.

Men sizga sinab ko'rishingizni maslahat beraman:

<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>

Hope this might help you. Cheers! :)

person Abdul    schedule 07.01.2016