1
<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
されていません右側のデータ範囲が最小値1と最大値15で始まっても、右側のy軸はデータ範囲を適切に取っておらず、グラフを隠しています。
私の英語は申し訳ありません。