样式:
指令:
nurseApp.directive('uiChart', function () { return { restrict: 'EACM', template: '<div></div>', replace: true, link: function (scope, elem, attrs) { var renderChart = function () { var data = scope.$eval(attrs.uiChart); var width = eval(attrs.chartWidth); var height = eval(attrs.chartHeight); elem.html(''); if (!angular.isArray(data)) { return; } var opts = {}; if (!angular.isUndefined(attrs.chartOptions)) { opts = scope.$eval(attrs.chartOptions); if (!angular.isObject(opts)) { throw 'Invalid ui.chart options attribute'; } } if (width) { elem.width(width); } if (height) { elem.height(height); } elem.jqplot(data, opts); }; scope.$watch(attrs.uiChart, function () { renderChart(); }, true); scope.$watch(attrs.chartWidth, function () { renderChart(); }, true); scope.$watch(attrs.chartMinDate, function () { renderChart(); }, true); $(window).resize(function () { renderChart(); });
scope.$watch(attrs.chartHeight, function () {
renderChart(); }, true); } }; });
使用:
<!--体征--> <div class="drug-overview shadow-show" hr-self-height="(($(window).height() - 100) / 2)"> <h5 class="hc-title-area no-border-top-left-right" ng-click="forRedirect(3)">体征</h5> <div class="main-content"> <div class="chart-opts" ui-chart="allChartData" chart-options="chartVSOpts" chart-width="(($(window).width() - 40)*2/3)-100" chart-height="(($(window).height() - 200) / 2)"></div> <div> <p>身高</p> <div class="main-content"> <span class="pat-h-weight"><b ng-bind="patientInfo.height"></b></span> <span>cm</span> </div> <p>体重</p> <div class="main-content"> <span class="pat-h-weight"><b ng-bind="patientInfo.weighed"></b></span> <span>kg</span> </div> </div> </div> </div>
JS:
chart-options="chartVSOpts" 上段代码中绿色标注的内容所对应的js
//生命体征图形 options $scope.chartVSOpts = { //title:'生命体征趋势图', title: { text: '', // title for the plot, show: false }, lengend: { location: 'sw', show: true }, series: [ { yaxis: 'yaxis', color: '#000000' }, { yaxis: 'y2axis', color: '#FF0000' }, { yaxis: 'y3axis', color: '#0000FF' } ], seriesDefaults: { shadow: false }, highlighter: {show: true}, axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, showTicks: true, min: new Date(new Date($scope.serverTime.getFullYear(), $scope.serverTime.getMonth(), $scope.serverTime.getDate()).getTime() - 6 * 24 * 60 * 60 * 1000), max: new Date(new Date($scope.serverTime.getFullYear(), $scope.serverTime.getMonth(), $scope.serverTime.getDate()).getTime() + 1 * 24 * 60 * 60 * 1000), tickInterval: "1 days", tickOptions: { formatString: '%m-%d' } }, yaxis: { min: 10, max: 50, ticks: [10, 20, 30, 40, 50], label: "呼吸", labelOptions: { angle: 0, stretch: 2.0, textColor: "#000000" }, tickOptions: { formatString: '%s ' } }, y2axis: { min: 35, max: 180, ticks: [30, 80, 130, 180, 230], label: "脉搏", labelOptions: { angle: 90, textColor: "#FF0000" }, tickOptions: { formatString: '%s ' } }, y3axis: { min: 34, max: 42, ticks: [34, 37, 40, 43, 46], tickOptions: { formatString: '%s' }, label: "体温", labelOptions: { angle: 90, textColor: "#0000FF" } } }, grid: { background: 'transparent', // CSS color spec for background color of grid. borderColor: 'transparent', // CSS color spec for border around grid. borderWidth: 0, shadow: false }, rendererOptions: {alignTicks: true} };
ui-chart="allChartData" 紫色对应的js
$scope.allChartData = [[null], [null], [null]];