在使图表响应时，x，y轴线消失(On making chart responsive the x,y axis line disappears)
我做了我的图表响应，但我注意到在调整x轴线，y轴正在消失。
我正在分享
var app = angular.module('chartApp', []);
app.controller('LineGraphCtrl', ['$scope','$http',
function($scope,$http){
$scope.lineGraph={
72:{company:{ais_time:0},user:{ais_time:0}},
73:{company:{ais_time:3},user:{ais_time:2}},
74:{company:{ais_time:2},user:{ais_time:1}},
75:{company:{ais_time:2},user:{ais_time:3}},
76:{company:{ais_time:3},user:{ais_time:4}},
77:{company:{ais_time:1},user:{ais_time:1}},
78:{company:{ais_time:2},user:{ais_time:0}},
79:{company:{ais_time:4},user:{ais_time:3}}};
console.log($scope.lineGraph);
$scope.lineaGraphData=[];
$scope.UservsCompanyAIData=[];
for(var i in $scope.lineGraph) {
console.log(i);
for (var j in $scope.lineGraph[i]) {
if(j=="company") {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].company.ais_time,
"key": "company"
});
} else {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].user.ais_time,
"key": "user"
});
}
}
}
function getDateOfISOWeek(w, y) {
var simple = new Date(y, 0, 1 + (w - 1) * 7);
var dow = simple.getDay();
var ISOweekStart = simple;
if (dow <= 4)
ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
else
ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
return ISOweekStart;
};
for(var i=0;i<$scope.lineaGraphData.length;i++){
var weekStart=getDateOfISOWeek($scope.lineaGraphData[i].week,2015);
$scope.UservsCompanyAIData.push({"Date":weekStart,"Label":$scope.lineaGraphData[i].key,"AIvalue":$scope.lineaGraphData[i].AI});
}
console.log($scope.UservsCompanyAIData);
}]);
app.directive('userVsCompanyAI', function($parse, $window){
return{
restrict:'EA',
scope: {data: '=data'},
link: function(scope, element, attrs) {
scope.$watch('data', function (data) {
if (data) {
var data = scope.data;
//Dimensions of the Graph
var margin={top:30,right:20,left:50,bottom:80},
width=800-margin.left -margin.right,
height=400-margin.top-margin.bottom;
var color = d3.scale.category10();
var parseDate =d3.time.format("%d/%m").parse;
//Range of the Graph
var x = d3.time.scale().range([0,width]);
var y = d3.scale.linear().range([height,0]);
//Defining the Axis
var xAxis=d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m")).ticks(5);
var yAxis=d3.svg.axis().scale(y).orient("left").ticks(5);
//Defining the line for user & company's Avg
var AILine =d3.svg.line()
.x(function (d){return x(d.Date)})
.y(function (d) {return y(d.AIvalue)});
var el = element[0];
//Adding the SVG to the Graph
var UserVsCompanyAILineChart=d3.select(el)
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 400")
//class to make it responsive
.classed("svg-content-responsive", true)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
data.forEach(function (d) {
d.Date=d.Date;
d.AIvalue=+d.AIvalue;
});
//Setting the Domain of Scales based on Data
x.domain(d3.extent(data,function (d) {
return d.Date;
}));
y.domain([0,d3.max(data,function (d) {
return d.AIvalue;
})]);
var dataNest=d3.nest()
.key(function (d) {
return d.Label;
})
.entries(data);
var legendRectSize = 16;
var legendSpace = (width)/dataNest.length;
dataNest.forEach(function (d,i) {
UserVsCompanyAILineChart.append("path")
.attr("class","line")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("d",AILine(d.values));
UserVsCompanyAILineChart.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", height + (margin.bottom/2)+ 30)
.attr("class", "WizUservsCompanyAvgReportLegend")
.style("fill", function() {
return d.color = color(d.key); })
.text(d.key);
UserVsCompanyAILineChart.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.attr("x", ((legendSpace/2)-30)+i*(legendSpace))
.attr("y", height + (margin.bottom/2)+ 15)
.style('fill', function() {
return d.color = color(d.key); })
.style('stroke', function() {
return d.color = color(d.key); });
});
UserVsCompanyAILineChart.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(xAxis)
UserVsCompanyAILineChart.append("g")
.attr("class","y axis")
.call(yAxis)
}
})
}
};
});
/* Styles go here */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
/*SVG Responsive*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
/*SVG Responsive Ends*/
<html>
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" type="text/css" />
</head>
<body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
<div ng-app="chartApp">
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 30%;width: 30%;float:right">
<div class="panel-body">
<div user-vs-company-a-i="" data="UservsCompanyAIData"></div>
</div>
</div>
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 70%;width: 70%;float:right" >
<div class="panel-body" >
<div user-vs-company-a-i data="UservsCompanyAIData"></div>
</div>
</div>
</div>
</div>
</body>
</html>
链接在这里。
有两个图表，一个较小，另一个较大。 在这里，你可以看到大尺寸的图表显示x，y轴线，但在较小的图表中，x，y轴线不可见。 有没有什么方法可以让图表响应，但是x，y轴线仍然是可见的。
任何帮助表示赞赏。
提前致谢 。
I made my chart Responsive , but what i noticed was on resize the line of x,y axis was disappearing .
I am sharing the
var app = angular.module('chartApp', []);
app.controller('LineGraphCtrl', ['$scope','$http',
function($scope,$http){
$scope.lineGraph={
72:{company:{ais_time:0},user:{ais_time:0}},
73:{company:{ais_time:3},user:{ais_time:2}},
74:{company:{ais_time:2},user:{ais_time:1}},
75:{company:{ais_time:2},user:{ais_time:3}},
76:{company:{ais_time:3},user:{ais_time:4}},
77:{company:{ais_time:1},user:{ais_time:1}},
78:{company:{ais_time:2},user:{ais_time:0}},
79:{company:{ais_time:4},user:{ais_time:3}}};
console.log($scope.lineGraph);
$scope.lineaGraphData=[];
$scope.UservsCompanyAIData=[];
for(var i in $scope.lineGraph) {
console.log(i);
for (var j in $scope.lineGraph[i]) {
if(j=="company") {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].company.ais_time,
"key": "company"
});
} else {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].user.ais_time,
"key": "user"
});
}
}
}
function getDateOfISOWeek(w, y) {
var simple = new Date(y, 0, 1 + (w - 1) * 7);
var dow = simple.getDay();
var ISOweekStart = simple;
if (dow <= 4)
ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
else
ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
return ISOweekStart;
};
for(var i=0;i<$scope.lineaGraphData.length;i++){
var weekStart=getDateOfISOWeek($scope.lineaGraphData[i].week,2015);
$scope.UservsCompanyAIData.push({"Date":weekStart,"Label":$scope.lineaGraphData[i].key,"AIvalue":$scope.lineaGraphData[i].AI});
}
console.log($scope.UservsCompanyAIData);
}]);
app.directive('userVsCompanyAI', function($parse, $window){
return{
restrict:'EA',
scope: {data: '=data'},
link: function(scope, element, attrs) {
scope.$watch('data', function (data) {
if (data) {
var data = scope.data;
//Dimensions of the Graph
var margin={top:30,right:20,left:50,bottom:80},
width=800-margin.left -margin.right,
height=400-margin.top-margin.bottom;
var color = d3.scale.category10();
var parseDate =d3.time.format("%d/%m").parse;
//Range of the Graph
var x = d3.time.scale().range([0,width]);
var y = d3.scale.linear().range([height,0]);
//Defining the Axis
var xAxis=d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m")).ticks(5);
var yAxis=d3.svg.axis().scale(y).orient("left").ticks(5);
//Defining the line for user & company's Avg
var AILine =d3.svg.line()
.x(function (d){return x(d.Date)})
.y(function (d) {return y(d.AIvalue)});
var el = element[0];
//Adding the SVG to the Graph
var UserVsCompanyAILineChart=d3.select(el)
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 400")
//class to make it responsive
.classed("svg-content-responsive", true)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
data.forEach(function (d) {
d.Date=d.Date;
d.AIvalue=+d.AIvalue;
});
//Setting the Domain of Scales based on Data
x.domain(d3.extent(data,function (d) {
return d.Date;
}));
y.domain([0,d3.max(data,function (d) {
return d.AIvalue;
})]);
var dataNest=d3.nest()
.key(function (d) {
return d.Label;
})
.entries(data);
var legendRectSize = 16;
var legendSpace = (width)/dataNest.length;
dataNest.forEach(function (d,i) {
UserVsCompanyAILineChart.append("path")
.attr("class","line")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("d",AILine(d.values));
UserVsCompanyAILineChart.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", height + (margin.bottom/2)+ 30)
.attr("class", "WizUservsCompanyAvgReportLegend")
.style("fill", function() {
return d.color = color(d.key); })
.text(d.key);
UserVsCompanyAILineChart.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.attr("x", ((legendSpace/2)-30)+i*(legendSpace))
.attr("y", height + (margin.bottom/2)+ 15)
.style('fill', function() {
return d.color = color(d.key); })
.style('stroke', function() {
return d.color = color(d.key); });
});
UserVsCompanyAILineChart.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(xAxis)
UserVsCompanyAILineChart.append("g")
.attr("class","y axis")
.call(yAxis)
}
})
}
};
});
/* Styles go here */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
/*SVG Responsive*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
/*SVG Responsive Ends*/
<html>
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" type="text/css" />
</head>
<body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
<div ng-app="chartApp">
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 30%;width: 30%;float:right">
<div class="panel-body">
<div user-vs-company-a-i="" data="UservsCompanyAIData"></div>
</div>
</div>
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 70%;width: 70%;float:right" >
<div class="panel-body" >
<div user-vs-company-a-i data="UservsCompanyAIData"></div>
</div>
</div>
</div>
</div>
</body>
</html>
link here .
There are 2 charts one with smaller size , other with bigger one . Here u can see that the chart with bigger size is showing x,y axis line but in the smaller graph the x,y axis line is not visible . Is there any possible way in which we can make the chart responsive but still the x,y axis line will be viible .
Any help is appreciated .
Thanks in advance .
最满意答案
要阻止他们消失，让他们变得更厚。
此时轴的stroke-width设置为1 。 主图大致为1：1的比例尺，因此它们的轴线宽度约为一个像素。 在您的小尺寸版本中，轴线以相应较小的厚度绘制 - 小于半个像素。 您无法绘制半个像素，因此浏览器会用浅灰色的线条绘制线条，使其几乎看不到。
要修复，使轴线变粗。
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 2;
shape-rendering: crispEdges;
}
如果“2”对您来说太厚，您可以使用中间值，例如1.5。
To stop them disappearing, make them thicker.
At the moment the stroke-width setting for your axes is 1. The main graph is at roughly 1:1 scale, so they axis lines are approximately one pixel in width. In your small scale version the axis lines are being drawn with a correspondingly smaller thickness - less than half a pixel. You can't draw half a pixel, so the browser draws the lines with a light grey colour instead, making them barely visible.
To fix, make the axis lines thicker:
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 2;
shape-rendering: crispEdges;
}
If "2" is too thick for you, you can use an intermediate value, such as 1.5.
更多推荐
发布评论