Question

过去几天我一直在使用vis.js试图达到我需要的目标而没有成功。

我得到了一个在线用户列表： [{x: 09:00, y: 0}, {x: 09:10, y: 1}, {x: 09:20, y: 2}] 在这种情况下，我想绘制一个将有3个矩形的图形，第一个将是00:10 x 0并且不可见，然后是00:10 x 1和最后00:10 x 2所以最终结果会像： enter image description here

我尝试用visjs做事但我只能绘制图形（就像函数是连续的）

然后我尝试使用条形图：但是条形宽度是固定的（我不能为每个条形设置不同的条形宽度）

<div id="visualization"></div>
<script type="text/javascript">
    var container = document.getElementById('visualization');
  var items = [
    {x: '09:00', y: 0},
    {x: '09:10', y: 1},
    {x: '09:20', y: 2}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
    start: '09:00',
    end: '09:20'
  };
  var graph2d = new vis.Graph2d(container, dataset, options);
</script>

Answer 1

这样的事情应该有效：

＆＃13;

function DateFromHours(date, hourString) {
  var split = hourString.split(":");
  date.setHours(split[0]);
  date.setMinutes(split[1]);
  return date
}

var container = document.getElementById('visualization');
var items = [
  {x: "09:00", y: 0}, 
  {x: "09:10", y: 1}, 
  {x: "09:20", y: 2}
];

items.forEach(function (item) {
  item.x = DateFromHours(new Date(), item.x);
});

var dataset = new vis.DataSet(items);
var options = {
    style:'bar',
    barChart: {width:50, align:'center'}, // align: left, center, right
    drawPoints: false,
    dataAxis: {
        icons:true
    },
    orientation:'top',
    start: DateFromHours(new Date(), '9:00'),
    end: DateFromHours(new Date(), '10:00')
};
var graph2d = new vis.Graph2d(container, items, options);

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<div id="visualization"></div>

＆＃13;

我是从this example派生出来的。您可以右键单击页面并在其上执行inspect命令以查找它的javascript。

我查看了api文档here，看来您的x必须是有效日期，所以我将所有值更新为有效日期格式（可以解析为日期的字符串应该适用，但是＆＃39; 9：00＆＃39;对于日期解析器来说还不够具体。

我使用forEach更新数组中对象的x属性。我还使用了JavaScript中给出的Date对象的一些标准属性

时间间隔的JavaScript可视时间轴图

1 个答案: