我絕對是AngularJS的初學者。所以,我會很感激任何幫助。我正嘗試使用Ionic和Angular-nvD3 lineChart構建一個包含圖表的應用程序。我有json文件中的數據。所以,我製作了工廠並使用了getData(),$ scope和service。我需要一個包含許多數據點的折線圖。但是輸出看起來像每個點都與另一個點分開。我想可能是因爲$ scope和getData函數。也許有一些循環,它分開數據。我試圖重寫代碼來解決問題,從工廠內的範圍提取數據到另一個分隔這個過程的範圍,但沒有任何運氣。我在app.js代碼如下從一個控制器內的示波器獲取數據到另一個示波器angularjs
(function() {
var app = angular.module('starter', ['ionic','nvd3']);
app.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get('chart.json');
};
return object;
}]);
app.controller('MainCtrl', ['$scope', 'services', function($scope, services) {
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data, function(prod) {
var sin = [];
sin.push({
x: prod.Date,
y: prod.low
});
return {
values: sin,
key: 'fff'
}
});
});
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
lines: {
xScale: d3.time.scale(),
},
x: function(d){ return d3.time.format('%Y-%m-%d').parse(d.x); },
y: function(d){ return d.y; },
useInteractiveGuideline: true,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
axisLabel: 'Time (ms)',
tickFormat: function(d){
return d3.time.format('%d-%m-%Y')(d);
},
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: -10
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
},
subtitle: {
enable: true,
text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
css: {
'text-align': 'center',
'margin': '10px 13px 0px 7px'
}
},
caption: {
enable: true,
html: '<b>Figure 1.</b> Lorem ipsum dolor sit amet, at eam blandit sadipscing, <span style="text-decoration: underline;">vim adhuc sanctus disputando ex</span>, cu usu affert alienum urbanitas. <i>Cum in purto erat, mea ne nominavi persecuti reformidans.</i> Docendi blandit abhorreant ea has, minim tantas alterum pro eu. <span style="color: darkred;">Exerci graeci ad vix, elit tacimates ea duo</span>. Id mel eruditi fuisset. Stet vidit patrioque in pro, eum ex veri verterem abhorreant, id unum oportere intellegam nec<sup>[1, <a href="https://github.com/krispo/angular-nvd3" target="_blank">2</a>, 3]</sup>.',
css: {
'text-align': 'justify',
'margin': '10px 13px 0px 7px'
}
}
};
}]);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
}());
而且這是在JSON文件
[
{
"Date": "2011-12-02",
"low": 8758.22466765
},
{
"Date": "2011-12-03",
"low": 8771.50964703
},
{
"Date": "2011-12-04",
"low": 8784.79462641
},
{
"Date": "2011-12-05",
"low": 8798.07960579
},
{
"Date": "2011-12-06",
"low": 8689.04458518
},
{
"Date": "2011-12-07",
"low": 8720.07956456
},
{
"Date": "2011-12-08",
"low": 8718.97454394
},
{
"Date": "2011-12-09",
"low": 8584.72952332
},
{
"Date": "2011-12-10",
"low": 8616.084502700001
},
{
"Date": "2011-12-11",
"low": 8647.43948208
},
{
"Date": "2011-12-12",
"low": 8678.79446147
},
{
"Date": "2011-12-13",
"low": 8552.15944085
},
{
"Date": "2011-12-14",
"low": 8507.64442023
},
{
"Date": "2011-12-15",
"low": 8383.43939961
},
{
"Date": "2011-12-16",
"low": 8388.08437899
},
{
"Date": "2011-12-17",
"low": 8336.42602504
},
{
"Date": "2011-12-18",
"low": 8284.76767109
},
{
"Date": "2011-12-19",
"low": 8233.10931714
},
{
"Date": "2011-12-20",
"low": 8266.49429652
},
{
"Date": "2011-12-21",
"low": 8377.569275900001
},
{
"Date": "2011-12-22",
"low": 8308.55425529
},
{
"Date": "2011-12-23",
"low": 8319.82173467
},
{
"Date": "2011-12-24",
"low": 8331.08921405
},
{
"Date": "2011-12-25",
"low": 8342.35669343
},
{
"Date": "2011-12-26",
"low": 8353.62417281
}
]
我想是這樣的數據:
services.getData().then(function successCb(data) {
$scope.data = _.map(data.data);
});
$scope.selectedSin = function(prod) {
var sin = [];
angular.forEach(data, function (sin) {
sin.push({
x: data.Date,
y: data.low
});
return {
values: sin,
key: 'fff'
}
});
};
但在控制檯中有一個錯誤:
e.values is undefined
對不起,忘了改變它。這是來自$ scope.data的數據。起初,我試過'angular.forEach(data.data,function(sin){',但沒有任何效果。 – Morti