【发布时间】:2016-09-13 07:37:11
【问题描述】:
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Graph2d | Basic Example</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.js"></script>
<body>
<h2>Graph2d | Basic Example</h2>
<br />
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var names = ['graph1', 'graph2'];
var groups = new vis.DataSet();
groups.add({
id: 0,
className: '',
options: {
yAxisOrientation: 'left',
drawPoints: {
style: 'point' // square, circle
}
}});
groups.add({
id: 1,
className: '',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
}
}});
var items = [
{x: new Date(1469626499397), y: 110, group: 0},
{x: new Date(1469626499497), y: 125, group: 0},
{x: new Date(1469626499597), y: 130, group: 0},
{x: new Date(1469626499697), y: 210, group: 0},
{x: new Date(1469626499897), y: 115, group: 0},
{x: new Date(1469626499997), y: 130, group: 0},
{x: new Date(1469626499397), y: 1, group: 1},
{x: new Date(1469626499597), y: 2, group: 1},
{x: new Date(1469626499697), y: 3, group: 1},
{x: new Date(1469626499797), y: 10, group: 1},
{x: new Date(1469626499897), y: 15, group: 1},
{x: new Date(1469626499997), y: 10, group: 1}
];
var dataset = new vis.DataSet(items);
var options = {
height:500,
//graphHeight:1500,
drawPoints: true,
dataAxis: {
right: {
range: {min:-1, max:20}
},
left: {
range: {min:100, max:250}
},
icons:true
},
};
var graph2d = new vis.Graph2d(container, dataset, groups, options);
</script>
</body>
</html>
http://i.stack.imgur.com/5Ug11.png 在图像中,右侧 y 轴未显示小于 5 且大于 12 的网格线。
我在这里面临的问题是右侧 y 轴没有正确获取数据范围并隐藏图形,即使右侧数据范围从最小值 1 和最大值 15 开始。
对不起我的英语。
【问题讨论】:
标签: javascript graph vis.js