Angular.js+SVG 简单的曲线图表

Simple AngularJS Graph (With added SVG line)

chart

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2240
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

var app = angular.module('graphApp', []);

app.controller('graphController', function($scope) {

// Options

$scope.width = 600;
        $scope.height = 350;
        // Data

$scope.yAxis = 'Sales';

$scope.xAxis = '2014';

$scope.points = [{
            label: 'January',
            xValue: 1,
            yValue: 36
        }, {
            label: 'February',
            xValue: 2,
            yValue: 54
        }, {
            label: 'March',
            xValue: 3,
            yValue: 62
        }, {
            label: 'April',
            xValue: 4,
            yValue: 82
        }, {
            label: 'May',
            xValue: 5,
            yValue: 96
        }, {
            label: 'June',
            xValue: 6,
            yValue: 104
        }, {
            label: 'July',
            xValue: 7,
            yValue: 122
        }, {
            label: 'August',
            xValue: 8,
            yValue: 152
        }, {
            label: 'September',
            xValue: 9,
            yValue: 176
        }, {
            label: 'October',
            xValue: 10,
            yValue: 180
        }, {
            label: 'November',
            xValue: 11,
            yValue: 252
        }, {
            label: 'December',
            xValue: 12,
            yValue: 342
        }];

// Find Maximum X & Y Axis Values - this is used to position the points as a percentage of the maximum
        $scope.maxY = 0;
        $scope.maxX = 0;

var arrLength = $scope.points.length;
        for (var i = 0; i < arrLength; i++) {
            // Find Maximum X Axis Value
            if ($scope.points[i].yValue > $scope.maxY)
                $scope.maxY = $scope.points[i].yValue;
            // Find Maximum Y Axis Value
            if ($scope.points[i].xValue > $scope.maxX)
                $scope.maxX = $scope.points[i].xValue;
        }

// End Controller  
    });

})();

编译

CSS

* {
    box-sizing: border-box;
}
h1 {
    color: #d07371;
}
body {
    font-size: 1.1em;
    text-align: center;
    background: #f4f0dc;
    color: #444;
}
p {
    width: 90%;
    margin: 20px auto;
}
.graph {
    position: relative;
    margin: 50px auto;
    background: #d9f2e6;
}
svg {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.y {
    font-weight: bold;
    border-bottom: 1px solid #71cbd0;
    position: absolute;
    text-align: center;
    padding: 10px;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    transform-origin: bottom left;
    bottom: 0;
    color: #d07371;
}
.x {
    font-weight: bold;
    border-top: 1px solid #71cbd0;
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 10px;
    top: 100%;
    color: #d07371;
}
.dot {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    background: #71cbd0;
    cursor: pointer;
    -webkit-animation: dots 1.5s ease;
    animation: dots 1.5s ease;
    z-index: 2;
}
.dot:after {
    content: attr(data-title);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    background: #d07371;
    color: white;
    position: absolute;
    padding: 10px;
    left: 150%;
    top: -15px;
    width: 0;
    opacity: 0;
    border-radius: 3px;
    z-index: 9999;
}
.dot:hover {
    background: #d07371;
}
.dot:hover:after {
    width: auto;
    opacity: 1;
}
@-webkit-keyframes dots {
    0% {
        bottom: 0;
        opacity: 0;
    }
    33% {
        bottom: 0;
        opacity: 1;
    }
}
@keyframes dots {
    0% {
        bottom: 0;
        opacity: 0;
    }
    33% {
        bottom: 0;
        opacity: 1;
    }
}

HTML

<h1>Simple AngularJS Graph with SVG line</h1>
<p>The ability to use Angular data values in inline style would allow for bar charts, graphs or pie charts to be created quite simply</p>
<div ng-app="graphApp">
    <div ng-controller="graphController as graph">

<div class="y" style="width:{{height}}px;">{{yAxis}}</div>

<div class="x">{{xAxis}}</div>

Simple AngularJS Graph (With added SVG line)

chart

编辑器支持Emmet

快捷键

Simple AngularJS Graph (With added SVG line)

chart

babylon.js + react.js很棒的3d图表代码示例

Zingchart.js+媒体查询实现响应式图表插件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：