我有用 Angular JS 制作的图表。我有两个指令，第一个名为 Linear Chart 1 的指令用于单个图形，第二个名为 Linear Chart 的指令是第一个图形中每个图形的编译。我的问题是我无法访问从线性图表 1 到线性图表的控制器和范围。我将如何访问控制器和范围？
我的控制器代码：
app.controller('GraphLineController', ['$scope', '$interval', function ($scope, $interval) {
$scope.graphLine = [{
"label1": 'PC-1',
"name": 'PC-1',
"cpu": [
{ i: 0, util: 100 },
{ i: 1, util: 20 },
{ i: 2, util: 100 },
{ i: 3, util: 30 },
{ i: 4, util: 40 },
{ i: 5, util: 60 },
{ i: 6, util: 80 },
{ i: 7, util: 90 },
{ i: 8, util: 100 },
{ i: 9, util: 10 }],
"mem": [90, 90, 90, 90, 90, 90, 90, 90, 90, 90],
"color": "#FF4C4B"
}, {
"label2": 'PC-2',
"name": 'PC-2',
"cpu": [
{ i: 0, util: 50 },
{ i: 1, util: 90 },
{ i: 2, util: 10 },
{ i: 3, util: 40 },
{ i: 4, util: 100 },
{ i: 5, util: 20 },
{ i: 6, util: 70 },
{ i: 7, util: 90 },
{ i: 8, util: 60 },
{ i: 9, util: 30 }],
"mem": [80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
"color": "#586FFF"
}, {
"label3": 'PC-3',
"name": 'PC-3',
"cpu": [
{ i: 0, util: 40 },
{ i: 1, util: 10 },
{ i: 2, util: 60 },
{ i: 3, util: 90 },
{ i: 4, util: 30 },
{ i: 5, util: 50 },
{ i: 6, util: 70 },
{ i: 7, util: 20 },
{ i: 8, util: 80 },
{ i: 9, util: 100 }],
"mem": [70, 70, 70, 70, 70, 70, 70, 70, 70, 70],
"color": "#E8C750"
}, {
"label4": 'PC-4',
"name": 'PC-4',
"cpu": [
{ i: 0, util: 30 },
{ i: 1, util: 50 },
{ i: 2, util: 90 },
{ i: 3, util: 70 },
{ i: 4, util: 80 },
{ i: 5, util: 60 },
{ i: 6, util: 40 },
{ i: 7, util: 20 },
{ i: 8, util: 100 },
{ i: 9, util: 10 }],
"mem": [60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
"color": "#59A36A"
}];
$scope.checkboxes = function(){
d3.selectAll('.nvd3.nv-legend g');
};
$scope.Line = angular.copy($scope.graphLine);
$scope.checkboxes = function () {
$scope.name = [];
};
$scope.onchange = function () {
$scope.Line = [];
angular.forEach($scope.graphLine, function (i, util) {
if ($scope.checkboxes[value.cpu]) $scope.Line.push(value);
})
}
$interval(function () {
$scope.graphLine[0].cpu.shift();
$scope.graphLine[1].cpu.shift();
$scope.graphLine[2].cpu.shift();
$scope.graphLine[3].cpu.shift();
angular.forEach($scope.graphLine[0].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[1].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[2].cpu, function (item) {
item.i--;
});
angular.forEach($scope.graphLine[3].cpu, function (item) {
item.i--;
});
$scope.graphLine[0].cpu.push({ i: $scope.graphLine[0].cpu.length, util: Math.random() * 100 });
$scope.graphLine[1].cpu.push({ i: $scope.graphLine[1].cpu.length, util: Math.random() * 100 });
$scope.graphLine[2].cpu.push({ i: $scope.graphLine[2].cpu.length, util: Math.random() * 100 });
$scope.graphLine[3].cpu.push({ i: $scope.graphLine[3].cpu.length, util: Math.random() * 100 });
}, 1000)
}]);
这是我的两个指令：
app.directive('linearChart1', function ($parse, $window, $interval) {
return {
restrict: 'EA',
scope: {
name: '=',
cpu: '=',
mem: '=',
color: '=',
graphLine: '='
},
template: "<svg width='1100' height='200'></svg>"+
'{{graphLine.name}}{{graphLine.cpu}}{{graphLine.mem}}{{graphLine.color}}',
link: function (scope, elem, attrs) {
scope.graphLine = graphLine;
var graphLine = ["name", "cpu", "mem", "color"];
console.log(graphLine);
var padding = 18;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;
var d3 = $window.d3;
var rawSvg = elem.find('svg');
var svg = d3.select(rawSvg[0]);
//$interval(function () {
// setRandomValues(graphLine);
// redrawLineChart();
//}, 1000, 1000);
//scope.$watchCollection(exp, function (i, util) {
// GraphLineToPlot = util;
// data2 - util;
// redrawLineChart();
//});
function setChartParameters() {
var xMaximumPlot = 5;
var yMaximumPlot = 100;
xScale = d3.scale.linear()
.domain([0, xMaximumPlot])
.range([padding + 5, rawSvg.attr("width") - padding]);
yScale = d3.scale.linear()
.domain([0, yMaximumPlot])
.range([rawSvg.attr("height") - padding, 0]);
xAxisGen = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
yAxisGen = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
lineFun = d3.svg.line()
.x(function (d) {
return xScale(d.i);
})
.y(function (d) {
return yScale(d.util);
})
.interpolate("linear");
}
function drawLineChart() {
setChartParameters();
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0,180)")
.call(xAxisGen);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxisGen);
//svg.append("svg:path")
// .attr({
// d: linefun(scope.cpu),
// "name": scope.name,
// "stroke": scope.color,
// "stroke-width": 2,
// "fill": "none",
// "class": pathclass
// });
}
function redrawLineChart() {
setChartParameters();
svg.selectAll("g.y.axis").call(yAxisGen);
svg.selectAll("g.x.axis").call(xAxisGen);
}
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": scope.color,
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
$interval(function () {
redrawLineChart();
}, 1000);
drawLineChart();
}
};
});
app.directive('linearChart', function ($parse, $window, $interval) {
return {
restrict: 'EA',
scope: {
name: '=',
color: '=',
cpu: '=',
mem: '='
},
template: "<svg width='1050' height='200'></svg>",
link: function (scope, elem, attrs) {
//var exp = $parse(attrs.chartData);
var padding = 18;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;
var d3 = $window.d3;
var rawSvg = elem.find('svg');
var svg = d3.select(rawSvg[0]);
//$interval(function () {
//setRandomValues(graphLine);
//redrawLineChart();
//}, 1000, 1000);
function setChartParameters() {
var xMaximumPlot = 5;
var yMaximumPlot = 100;
xScale = d3.scale.linear()
.domain([0, xMaximumPlot])
.range([padding + 5, rawSvg.attr("width") - padding]);
yScale = d3.scale.linear()
.domain([0, yMaximumPlot])
.range([rawSvg.attr("height") - padding, 0]);
xAxisGen = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10);
yAxisGen = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
lineFun = d3.svg.line()
.x(function (d) {
return xScale(d.i);
})
.y(function (d) {
return yScale(d.util);
})
.interpolate("basis");
}
function drawLineChart() {
setChartParameters();
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0,180)")
.call(xAxisGen);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(20,0)")
.call(yAxisGen);
svg.append("svg:path")
.attr({
d: lineFun(scope.cpu),
"name": scope.name,
"stroke": scope.color,
"stroke-width": 2,
"fill": "none",
"class": pathClass
});
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#586FFF",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
// });
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#E8C750",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass,
// });
//svg.append("svg:path")
// .attr({
// d: lineFun(scope.cpu),
// "name": scope.name,
// "stroke": "#59A36A",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
// });
}
function redrawLineChart() {
setChartParameters();
svg.selectAll("g.y.axis").call(yAxisGen);
svg.selectAll("g.x.axis").call(xAxisGen);
svg.select(".path").attr({
d: lineFun(scope.cpu),
"stroke": scope.color,
"stroke-width": 2,
"fill": "none",
"class": pathClass
});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#586FFF",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#E8C750",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
//svg.select(".path").attr({
// d: lineFun(scope.cpu),
// "stroke": "#59A36A",
// "stroke-width": 2,
// "fill": "none",
// "class": pathClass
//});
}
$interval(function () {
redrawLineChart();
}, 1000);
drawLineChart();
}
};
});