这篇文章是以下内容的后续:我正在尝试在 Angular 中注入一个包含图形的部分模板 本质上,我有一个 Angular 应用程序,当我单击“employee”时,我正在尝试注入一个名为“employees.html”的部分模板" 在下拉菜单中。
感谢之前的回答,我可以使用 Angular 控制器调用 d3plus 箱线图(angular-d3plus.js:https ://github.com/mariohmol/angular-d3plus )。我正在使用盒子演示:http ://codepen.io/mariomol/pen/vGNQaV 只是为了让它首先工作。
但是,箱线图非常微弱(我在屏幕上几乎看不到它们):
通常,它们应该清楚地显示:http: //d3plus.org/examples/basic/78018ce8c3787d4e30d9/ 是因为我以某种方式干扰了 CSS 吗?
这是我更新的employees.html:
<div data-ng-app="myModule">
<div data-ng-controller="employeesController">
<d3plus-box data="base_data" id='name' y="value" x="year"></d3plus-box>
</div>
</div>
这是我更新的 Angular 模块(我正在使用测试数据):
/// <reference path="angular.min.js" />
var app = angular.module("myModule", ['ngRoute','angular-d3plus'])
.config(function ($routeProvider) {
$routeProvider
.when('/cases', { // Root: initialize with cases
templateUrl: 'templates/cases.html',
controller: 'casesController'
})
.when('/protocols', { // Root: initialize with cases
templateUrl: 'templates/protocols.html',
controller: 'protocolsController'
})
.when('/employees', {
templateUrl: 'templates/employees.html',
controller: 'employeesController'
})
})
.controller('casesController', function ($scope) {
$scope.message = "Cases!";
})
.controller('protocolsController', function ($scope) {
$scope.message = "This is the protocols page!";
})
.controller('employeesController', function ($scope, $http) {
$http.get('dataWebService.asmx/getTotalForDateIntervalEmployees', {
params: { startDate: '2015-01-01', endDate: '2016-08-01' }
})
.then(function (response) {
$scope.base_data = [
{ "year": 1991, "name": "alpha", "value": 15, "group": "black" },
{ "year": 1991, "name": "beta", "value": -10, "group": "black" },
{ "year": 1991, "name": "gamma", "value": 5, "group": "black" },
{ "year": 1991, "name": "delta", "value": -50, "group": "black" },
{ "year": 1992, "name": "alpha", "value": 20, "group": "black" },
{ "year": 1992, "name": "beta", "value": -10, "group": "black" },
{ "year": 1992, "name": "gamma", "value": 10, "group": "black" },
{ "year": 1992, "name": "delta", "value": -43, "group": "black" },
{ "year": 1993, "name": "alpha", "value": 30, "group": "black" },
{ "year": 1993, "name": "beta", "value": -40, "group": "black" },
{ "year": 1993, "name": "gamma", "value": 20, "group": "black" },
{ "year": 1993, "name": "delta", "value": -17, "group": "black" },
{ "year": 1994, "name": "alpha", "value": 60, "group": "black" },
{ "year": 1994, "name": "beta", "value": -60, "group": "black" },
{ "year": 1994, "name": "gamma", "value": 25, "group": "black" },
{ "year": 1994, "name": "delta", "value": -32, "group": "black" }
];
});
});
非常感谢您的宝贵时间!
编辑: