在nvd3折线图中，showMaxMin:true不起作用
提问于 2017-01-04 14:57:21
大家好，我已经在我的应用程序中实现了折线图，我在X轴上有像“in，February..till..December”这样的刻度，图表绘制得很完美，但X轴的刻度并没有按原样呈现。请帮助我得到解决方案，这是我所做的，以及我可以绘制的折线图的快照，
JSP代码：
<nvd3 options="options" data="dataForLineChart"></nvd3>控制器：
$scope.options = {
chart: {
type: 'lineChart',
showXAxis:true,
height: 300,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: false,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
axisLabel: 'Timeline(months)',
showMaxMin: false
},
yAxis: {
axisLabel: 'Rate of aquisition',
tickFormat: function(d){
return d3.format('')(d);
},
axisLabelDistance: -8
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
},
showLegend : false
}
}我提供的数据是：
$scope.dataForLineChart =
[{
"key": "3",
"values":[{
"x": "0",
"y": "57.0"
}, {
"x": "1",
"y": "67.0"
}, {
"x": "2",
"y": "40.0"
}, {
"x": "3",
"y": "20.0"
}, {
"x": "4",
"y": "10.0",
}, {
"x": "5",
"y": "40.0"
}, {
"x": "6",
"y": "57.0",
}, {
"x": "7",
"y": "44.0"
}, {
"x": "8",
"y": "23.0"
}, {
"x": "9",
"y": "75.0"
}, {
"x": "10",
"y": "22.0"
}, {
"x": "11",
"y": "12.0"
}]
}];最后，我的图表如下所示
为什么所有的12个月都没有得到渲染
将宽度设置为800后：
回答 2
Stack Overflow用户
发布于 2017-01-04 15:49:35
它实际上是有效的，它显示了x轴上的所有值，只需调整图表的大小并查看，
这是因为当您调整图表大小时，它会自动调整轴的大小。只需将宽度更改为800，您就可以看到。
演示
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
showXAxis: true,
height: 300,
width:800,
margin: {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d) {
return d.x;
},
y: function(d) {
return d.y;
},
useInteractiveGuideline: false,
dispatch: {
stateChange: function(e) {
console.log("stateChange");
},
changeState: function(e) {
console.log("changeState");
},
tooltipShow: function(e) {
console.log("tooltipShow");
},
tooltipHide: function(e) {
console.log("tooltipHide");
}
},
xAxis: {
axisLabel: 'Timeline(months)',
showMaxMin: false,
},
yAxis: {
axisLabel: 'Rate of aquisition',
tickFormat: function(d) {
return d3.format('')(d);
},
axisLabelDistance: -8
},
callback: function(chart) {
console.log("!!! lineChart callback !!!");
},
showLegend: false
}
}
$scope.dataForLineChart = [{
"key": "3",
"values": [{
"x": "0",
"y": "57.0"
}, {
"x": "1",
"y": "67.0"
}, {
"x": "2",
"y": "40.0"
}, {
"x": "3",
"y": "20.0"
}, {
"x": "4",
"y": "10.0",
}, {
"x": "5",
"y": "40.0"
}, {
"x": "6",
"y": "57.0",
}, {
"x": "7",
"y": "44.0"
}, {
"x": "8",
"y": "23.0"
}, {
"x": "9",
"y": "75.0"
}, {
"x": "10",
"y": "22.0"
}, {
"x": "11",
"y": "12.0"
}]
}];
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Discrete Bar Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="dataForLineChart"></nvd3>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>
</html>
Stack Overflow用户
发布于 2017-01-13 08:35:15
为了显示标签，尽管没有海的宽度是渲染所必需的，但到以下函数：
var chart = nv.models.multiBarChart()
.reduceXTicks(false) //If 'false', every single x-axis tick label will be rendered.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41466822
复制相关文章
腾讯云开发者
