Я пытаюсь нарисовать простую гистограмму, используя crossfilter, dc.js и angular-dc. Строковая диаграмма работает нормально. Гистограмма не отображает столбцы. В Chrome, если я проверю, я вижу, что значения есть. и если я принудительно сфокусируюсь, я увижу графики. Я пробовал все предложения, но кажется, что есть 3 проблемы:
Все столбцы начинаются с 0 по оси x. Ширина каждой полосы составляет 1 пиксель. Полосы не отображаются на экране.
Можете ли вы дать мне решение вышеуказанного вопроса. Я использовал следующую ссылку для создания гистограммы: https://github.com/TomNeyland/angular-dc/blob/master/example/stocks/nasdaq.html
Есть ли какая-либо другая ссылка, связанная с гистограммой с использованием angular-dc.
Вот пример кода:
<!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>