自定义指令 图标展现

样式：
　　

指令：

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]];