指定最小选择范围
调试运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图形展示</title>
</head>
<body>
<div class="detail-section">
<div id="canvas" style="width : 950px;height : 400px;">
</div>
</div>
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js -->
<script src="http://g.tbcdn.cn/bui/acharts/1.0.32/astock-min.js"></script>
<!-- https://g.alicdn.com/bui/acharts/1.0.29/astock-min.js -->
<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$.getJSON('/json/stock-data.json',function (data) {
var stock = new AStock({
theme : AChart.Theme.SmoothBase,
id : 'canvas',
width : 950,
height : 400,
plotCfg : {
margin : [60,50,60,50] //画板的边距
},
xAxis : {//格式化时间
type : 'time' ,
formatter : function(value) {
return Chart.Date.format(new Date(value),'yyyy-mm-dd');
},
labels : {
label : {
'font-size': '10'
}
},
animate : false
},
yAxis : {
animate : false
},
seriesOptions : { //设置多个序列共同的属性
lineCfg: {
markers: null,
animate: false
}
},
rangeSelectorOption: {
//指定最小选择范围
minZoomInterval: 86400000 * 100
},
legend: null,
xTickCounts : [1,8],//设置x轴tick最小数目和最大数目
tooltip : {
valueSuffix : '¥'
},
series : [{
name: 'USD to EUR',
line : {
'stroke-width' : 1
},
lineActived : {
'stroke-width' : 1
},
area : {
fill : '90-#fff-rgb(47,126,216)',
stroke : 'none'
},
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2006, 0, 01),
data: data
}]
});
stock.render();
});
</script>
</body>
</html>