0
Başlık, herşeyi belirtir: grafik basitçe görüntülenmez. here verilen örneği uygulamaya çalışıyorum.Angular-NVD3 Grafik Oluşturulmuyor
Tüm komut dosyaları ve stil sayfalarına erişilebilir (404’ler yok). Eminim bu göze çarpan bir şeydir, ama ne olduğunu tam olarak göremiyorum. Google Chrome V49'u kullanıyorum ve diğer web sitelerinde grafiklerle ilgili bir sorunum yok.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitoring - Integration Hub</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/nv.d3.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Integration Hub</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Monitoring">Monitoring</a></li>
<li><a href="/Settings">Settings</a></li>
<li><a href="/Credentials">Credentials</a></li>
<li><a href="/Logs">Logs</a></li>
<li><a href="/Mappings">Mappings</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
<p class="nav navbar-text navbar-right">Hello, User!</p>
</div>
</div>
</div>
<div class="container body-content">
<div ng-app="monitoringApp">
<h2>Monitoring</h2>
<p>
The information presented on this page has a sample resolution of 5 seconds.
</p>
<div ng-controller='OverviewCtrl'>
<nvd3 options='options' data='data'></nvd3>
</div>
</div>
<hr />
<footer>
<p>© Some Org, 2016.</p>
</footer>
</div>
<script src="/Scripts/jquery-2.2.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/d3/d3.min.js"></script>
<script src="/Scripts/nv.d3.js"></script>
<script src="/Scripts/angular-nvd3.js"></script>
<script src="/Scripts/Apps/monitoring-app.js"></script>
</body>
</html>
Ve burada izleme-app.js içerikleri şunlardır:
var settingsApp = angular.module('monitoringApp', []);
settingsApp.controller('OverviewCtrl', function ($scope, $http) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 60,
left: 55
},
x: function (d) { return d.label; },
y: function (d) { return d.value; },
showValues: true,
valueFormat: function (d) {
return d3.format(',.4f')(d);
},
transitionDuration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: 30
}
}
};
$scope.data = [{
key: "Cumulative Return",
values: [
{ "label": "A", "value": -29.765957771107 },
{ "label": "B", "value": 0 },
{ "label": "C", "value": 32.807804682612 },
{ "label": "D", "value": 196.45946739256 },
{ "label": "E", "value": 0.19434030906893 },
{ "label": "F", "value": -98.079782601442 },
{ "label": "G", "value": -13.925743130903 },
{ "label": "H", "value": -5.1387322875705 }
]
}];
});