标签: vis.js-timeline

是否可以使用visjs在时间轴上绘制线图？

我想得到类似http://almende.github.io/chap-links-library/js/timeline/examples/example19_bar_graph.html这样的内容,但我不需要条形图,而是需要折线图.

基本上问题是,是否可以在同一个画布上获取时间轴和graph2d,如下例所示？

我正在尝试使用visjs lib但是无法让他们开始使用示例工作它是这样的:

<script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for …

我正在使用vis.js来显示时间轴.

我有以下几项:

var items = new vis.DataSet([
  {id: 1, content: '1) Next To 2', start: '2014-04-20 00:00:00', end : '2014-04-20 00:59:59'},
  {id: 2, content: '2) Next To 1', start: '2014-04-20 01:00:00', end : '2014-04-20 02:59:59'},
  {id: 3, content: 'Underneath   ', start: '2014-04-20 00:00:00', end : '2014-04-20 05:59:59'}
]);

id 1和id 2开始/结束彼此不重叠(按时间).所以我总是希望它们在时间轴内出现在同一行,而不管缩放级别如何.

但是我无法设置stack : false,因为我想要id : 3在1和2下面.

这是一个JSFiddle:http://jsfiddle.net/uqn6q4jd/17/

1)和2)应始终在同一条线上,3)始终在下面

我还能做到这一点吗？

我已经看过Vis JS源代码,并且觉得我可以通过以下方式实现我需要的改进:

exports.stack = function...
exports.nostack = function...

如果有一个我失踪的设置或功能,那将是我做出改变的首选路线......

使用react-visjs-timeline,如何调用Timeline组件的方法？

方法如:

• timeline.fit();
• timeline.setItems({...});
• timeline.focus(id);

我在组件中添加了一个引用,但我不确定调用方法的项目:

<Timeline
  ref={this.timelineWrapperRef}
  options={this.state.options}
  items={this.state.items}
/>

在对文档react-visjs-timeline没有提及如何调用方法.

我有一个从 2017 年 1 月到 2018 年的 VisJS 时间线。时间线以年中三个月的范围为中心打开，但我希望它每次都以当前时间为中心打开。

min: new Date(2017, 1, 5),           // lower limit of visible range
max: new Date(2018, 1, 11),          // upper limit of visible range
zoomMin: 1000 * 60 * 60 * 24,        // one day in milliseconds
zoomMax: 1000 * 60 * 60 * 24*31*3,   // three months in milliseconds

我试图连接到timechange或timechanged事件处理程序时遇到问题.我收到一个无效的启动"NaN"错误,这似乎是由添加自定义时间栏引起的...

以下是我的代码示例...

timeline.setOptions({
    height: '100%',
    editable: false,
    moveable: true,
    zoomable: true,
    configure: true,
    showCurrentTime: false,
    start: vis.moment.utc().format('YYYY-MM-DDT00:00:00.000Z',
    moment: function(date) {
      return vis.moment(date).utc();
     }
});

timeline.addCustomTime(vis.moment.utc().valueOf(), 'my-time-bar');
timeline.on('timechanged', function(props) {
     console.log('timechanged...');
});

如果我注释掉该timeline.on('timechanged')行,我没有收到错误,所有渲染都正确.我在Chrome和FireFox中都收到了错误消息.

我使用下面的代码来显示我的项目中的时间表的时间线视图。x 轴显示周数，y 轴显示服务。我想知道如何限制用户在 x 轴的特定范围之后移动。用户可能只能查看 x 轴上 1 年的数据。是否有任何选项可以设置图表的默认缩放

 var Id = 1;
var url = "/ScheduleManagement/ServiceManagement/GetMasterConfigurationForChart";
var data = { 'transitPlanId': Id };
$.ajax({
    url: url,
    data: data,
    cache: false,
    dataType: 'json',
    type: "POST",
    success: function (data) {
       // Graph2d.clear();
        var xAxis = [];
        var x = {};
        var yAxis = [];
        var y = {};
        var schedule = data.SeriviceList;
        for (var i = 0; i < schedule.length; i++) {

            var labelContent = schedule[i].MasterScheduleName + ' ' + 'Start …

我一直在使用visjs.org/docs/timeline/来显示数据的时间轴视图.我有一个指令,从API获取数据并使用该$compile方法创建模板.

<vis-timeline timeline-data="apiData"></vis-timeline>

并且linkFn我正在迭代数据以创建模板的范围,该模板将作为vis的内容传递DataSet.

link: function(scope,element,attr){
   if(scope.roster.timelineData){

     angular.forEach(scope.roster.timelineData, function(){

     //Create a scope for the directive used for vis DataSet
     var templateScope = scope.$new(true);//create an isolated scope

     templateScope.name = 'templateData';
     //this can be different for each iteration

     var template = $compile('<timeline-item template-data="name"></timeline-item>')(templateScope)[0];

     });
   }
 }

我将编译后的模板作为vis的内容推DataSet送到了时间轴.尽管此方法运行良好,但构建时间轴大约需要10秒钟.对时间线的任何编辑都需要10秒才能反映出来.

如果我添加一个普通模板而不是它,它确实会快速添加.如何提高编译模板的速度？

我在Vis JS 时间线中使用以下选项在时间线顶部生成带有时间标签的水平轴：

orientation: {
    axis: 'both'
},

水平轴如下所示：

我的时间线有很多行，因此用户需要垂直向下滚动页面才能看到所有内容。问题是向下滚动页面时，顶部的水平轴不会留在视图中。

问题：如何冻结顶部的水平轴，以便向下滚动时时间标签保持在视图中？

以下代码片段或jsfiddle.net/nj1647tb是我的时间表：

orientation: {
    axis: 'both'
},

const seed = '11';
Math.seedrandom(seed);

const nGroups = 40;
const maxSubGroups = 2;
const maxItemsPerSubGroup = 1;
const metaEventCount = 2;
const itemLengthScale = 200;

let now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 12;
var itemCount = 70;
var tcCrashProbability = 0.2;

function randInt(min, max) {
  return Math.round(min + Math.random() * (max - min));
}

function getStartEnd(earliestStart) { …

当我单击时间线中的项目时，我无法获取标题值。我可以获得该组，但标题未定义。有没有办法获得称号。当我将鼠标悬停在该项目上时，标题将显示为工具提示。

var items = new vis.DataSet([
  { content: '', start:'2021-10-28 00:00:0', end:' 2021-10-28 01:59:59',group:'l0t',title: 'Bear',className: "green"},
  { content: '', start: '2021-10-28 02:00:01', end:'2021-10-28 03:59:58',group: 'l0t', title: 'Tiger',className: "green",}])
...
var timeline = new vis.Timeline(container, items, groups, options);
timeline.on("click", function (properties) {
  console.log(properties.group)
});