Area Chart

最新推荐文章于 2021-10-10 11:03:15 发布

echo_blue-eyes

最新推荐文章于 2021-10-10 11:03:15 发布

阅读量710

点赞数 1

分类专栏： AngularJs 文章标签： D3 Area Chart AngularJs Directive

本文链接：https://blog.csdn.net/woaipaiqiu/article/details/82079912

版权

AngularJs 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

转载请注明出处: https://mp.csdn.net/postedit/82079912

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        .area-chart-demo-area {
            fill: rgba(70,130,180, 0.9);
            clip-path: url(#clip);
        }

        .area-chart-demo-xAxis path{
            fill: none;
            stroke: #000;
        }
        .area-chart-demo-xAxis line{
            stroke-width: 1;
            stroke: #333;
        }

        .area-chart-demo-xAxis text{
            fill: gray;
            font-size:12px;
            font-family: Arial
        }

        #areaChartDemoXAxis g.tick text{
            transform: rotate(-45deg);
        }

        .area-chart-demo-yAxis line.area-chart-demo-grind-line{
            stroke:rgb(229, 229, 229);
        }
        .area-chart-demo-dot{
            fill: white;
            stroke: steelblue;
            stroke-width: 1px;
        }

        .area-chart-demo-tooltip{
            position: absolute;
            background-color: rgba(255,255,255,.75);
            padding: 1px;
            border: 1px solid rgba(0,0,0,.2);
            font-family: Arial;
            font-size: 1.3rem;
            box-shadow: 0 0.5rem 10px rgba(0,0,0,.2);
            border-radius: 0.6rem;
            word-wrap: break-word;
            max-width: 30rem;
        }
        .area-chart-demo-tooltip h3{
            position:relative;
            color: #428bca;
            cursor: pointer;
            margin: 0;
            padding: .4rem 1.4rem;
            font-weight: 400;
            background-color: rgba(247, 247, 247, .75);
            text-align:center;
            border-bottom: 1px solid #ebebeb;
            border-radius: .5rem .5rem 0 0;
            form-family: Arial;
            font-size: 1.4rem;
        }

        #areaChartDemoXAxis g text{
            text-anchor: end !important;
        }

    </style>
</head>
<body>
    <div>
         <han-area-chart chart-data="vm.cache.clientDensityData"></han-area-chart>
    </div>
</body>
</html>

/**
 * Created by liuyy on 2018/8/26.
 */
(function(){
	'use strict';

	angular.module("myApp.areaChart")
		.directive('AreaChart', areaChartFunc);

	areaChartFunc.$inject = ['$window', '$timeout'];
	function areaChartFunc($window, $timeout){
		var directive = {
			restrict: 'AE',
			template: "<div id='areaChartDemo' style='width:100%;'></div>",
			scope: {
				chartData: '='
			},
			link: function(scope, element, attr, ctrl){
				var timer;
				scope.windowWidth  = $window.innerWidth;
				angular.element($window).bind('resize', function(){
					scope.windowWidth = $window.innerWidth;
					scope.$digest();
				});

				scope.$watch("{windowWidth: windowWidth, chartData: chartData}", function(newValue, oldValue){
					if(timer){
						$timeout.cancel(timer);
					}
					timer = $timeout(function(){
						hideTooltip();
						renderAreaChart(scope);
					}, 400);
				}, true);
			}
		};
		function renderAreaChart(scope){
			var width = 600;
			var height = 350;
			width = $("#areaChartDemo")[0].offsetWidth;
			var margin = {top: 20, right: 20, bottom: 80, left: 100};
			var svgWidth = width - margin.left -margin.right;
			var svgHeight = height - margin.top - margin.bottom;
			var normalCircleR = 3;
			var enlargedCircleR = 5;
			var xScale = d3.time.scale()
				.range([0, width - margin.left - margin.right]);
			var yScale = d3.scale.linear()
				.range([height - margin.top - margin.bottom, 0]);
			var zoomBehavior = d3.behavior.zoom().scaleExtent([1, 8]);

			d3.select("svg#area-chart-demo-svg").remove();
			if(scope.chartData.length == 0){
				return;
			}

			var areaChartDemoSvg = d3.select("#areaChartDemo")
				.append("svg")
				.attr("id", "area-chart-demo-svg")
				.attr("width", '100%')
				 .attr("height", height);

			var g = areaChartDemoSvg.append("g")
				.attr("transform", "translate(" + margin.left + "," +  margin.top + ")");

			var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient('bottom');
			if(scope.chartData.length == 24 || scope.chartData.length == 168){
				xAxis.tickFormat(d3.time.format("%m/%d-%H:%M:%S"));
			}else{
				xAxis.tickFormat(d3.time.format("%Y/%m/%d"));
			}

			xScale.domain(d3.extent(scope.chartData, function(d){ return d.date;}));
			g.append("g")
				.attr("id", "areaChartDemoXAxis")
				.attr("class", "area-chart-demo-xAxis")
				.attr("transform", "translate(0," + svgHeight +")")
				.call(xAxis);

			areaChartDemoSvg.append("text")
				.attr("dy", "0.71em")
				.attr("x", width - margin.right)
				.attr("y", height - margin.top)
				.style({
					"text-anchor": "end",
					"font-size": "12px",
					"font-weight": "bold"
				})
				.text("Date");

			zoomBehavior.x(xScale);

			var yMaxNumber = d3.max(scope.chartData, function(d){return d.client_number;});
			var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient('left')
				.tickFormat(d3.format("d"));

			if(yMaxNumber == 0){
				yScale.domain([0, 1]);
			}else{
				yScale.domain([0, yMaxNumber+10]);
			}

			g.append("g")
				.attr("id","areaChartDemoYAxis")
				.attr("class", "area-chart-demo-yAxis")
				.call(yAxis);
			areaChartDemoSvg.append("text")
				.attr("transform", "rotate(-90)")
				.attr("x", -20)
				.attr("dy", ".71em")
				.style({
					"text-anchor": "end",
					"font-weight": "bold",
					"font-size": "12px"
				})
				.text("Client Number");

			d3.selectAll("g#areaChartDemoYAxis g.tick")
				.append("line")
				.attr("class", "area-chart-demo-grind-line")
				.attr("x1", 0)
				.attr("y1", 0)
				.attr("x2", svgWidth)
				.attr("y2", 0);

			var area = d3.svg.area()
				.interpolate("monotone")
				.x(function(d){return xScale(d.date);})
				.y0(height - margin.top - margin.bottom)
				.y1(function(d){return yScale(d.client_number)});

			var graphLayer = g.append('g')
				.attr('class','graph_layer');
			graphLayer.append("clipPath")
				.attr("id", "clip")
				.append("rect")
				.attr("width", width - margin.left - margin.right)
				.attr("height", height);
			graphLayer.append("path")
				.datum(scope.chartData)
				.attr("class", "area-chart-demo-area")
				.attr("d", area)
				.attr('clip-path','url(#clip)');

			graphLayer.selectAll(".area-chart-demo-dot")
				.data(scope.chartData)
				.enter()
				.append("circle")
				.attr("class", "area-chart-demo-dot")
				.attr('clip-path','url(#clip)')
				.attr("cx", area.x())
				.attr("cy", area.y1())
				.attr("r", normalCircleR)
				.on('mouseover', function(d){
					d3.select(this).attr("r", enlargedCircleR);
					d.flag = "clientNumber";
					d.title = "Client Number";
					d.timeFormat = "hour";
					switch(scope.chartData.length){
						case 24:
						case 168:
							d.timeFormat = "hourly";
							break;
						case 30:
						case 90:
							d.timeFormat = "day";
							break;
					}
					renderChartTooltip(d);
				})
				.on("mouseout", function(){
					d3.select(this).attr("r", normalCircleR);
					hideTooltip();
				});

			areaChartDemoSvg.call(zoomBehavior.on('zoom', function(){
				areaChartDemoSvg.select("g#areaChartDemoXAxis").call(xAxis);
				areaChartDemoSvg.select("g#areaChartDemoYAxis").call(yAxis);
				areaChartDemoSvg.select("path.area-chart-demo-area").attr("d", area);
				g.selectAll(".area-chart-demo-dot")
					.attr("cx", area.x())
					.attr("cy", area.y1());
			}));
		}

		/*Render tool tip*/
		function renderChartTooltip(currentData){
			d3.select("div.area-chart-demo-tooltip").remove();
			var tooltipDiv = d3.select("body").append("div")
				.attr("class", "area-chart-demo-tooltip")
				.style("left", d3.event.pageX + "px")
				.style("top", d3.event.pageY + 20 + "px");

			tooltipDiv.append("h3")
				.text(currentData.title);
			if(currentData.flag == 'clientNumber'){
				tooltipDiv.append("p")
					.style("text-align", "center")
					.text(currentData.client_number);
			}else{
				tooltipDiv.append("p")
					.style("text-align", "center")
					.text(function(){
						return "Rx: " + currentData.rx.toFixed(2) + "GB";
					});
				tooltipDiv.append("p")
					.style("text-align", "center")
					.text(function(){
						return "Tx: " + currentData.tx.toFixed(2) + "GB";
					})
			}
			tooltipDiv.append("p")
				.style("text-align", "center")
				.text(function(){
					if(currentData.timeFormat == 'day'){
						return d3.time.format("%Y/%m/%d")(new Date(currentData.date));
					}else{
						return d3.time.format("%m/%d-%H:%M:%S")(new Date(currentData.date));
					}

				});
		}

		function hideTooltip(){
			d3.select("div.area-chart-demo-tooltip").remove();
		}

		return directive;
	}
})();

echo_blue-eyes

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Area Chart

转载请注明出处: https://mp.csdn.net/postedit/82079912&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &amp
复制链接

扫一扫