Vis.js

Question

技术详情：

JS 框架：Aurelia

图表框架：vis.js（graph2D 库）

我正在为基于 Aurelia 的网站上的仪表板视图设计网格布局。各个网格将在中间显示一个小图形。因为我只需要一个基本的折线图，所以我使用了 Graph2D 库。

尝试几次后可以让它显示图形，但它显示的是网格线和后面的标签，在小尺寸网格中，看起来很丑陋。

1) 有人可以分享代码片段来禁用网格线和标签显示.. 我当前的选项设置是：

    var options= {
    start : '2014-06-11',
    end : '2014-06-16',
    graphHeight: '45px',
    dataAxis:{
       showMinorLabels:false,
       showMajorLabels:false,
       visible:false
     }
    }

2) 此外，我当前的项目数组如下（事实上，我正在使用示例中的那个）：

    var items = [
        {x: '2014-06-13', y: 30},
        {x: '2014-06-14', y: 10},
        {x: '2014-06-15', y: 15},
        {x: '2014-06-16', y: 30},
        {x: '2014-06-17', y: 10},
        {x: '2014-06-18', y: 15}
     ];

当我尝试将 "x:" 值更改为其他值（在我的例子中显示时间）时，例如

    var items = [
        {x: '10:00', y: 30},
        {x: '10:30', y: 10},
        {x: '11:00', y: 15},
        {x: '11:30', y: 30},
        {x: '12:00', y: 10},
        {x: '12:30', y: 15}
        {x: '13:00', y: 30},
        {x: '13:30', y: 10}
    ];

它抛出了一个 'X is NaN' 错误.. 我如何更改这些值..我看到了一些使用格式化程序的建议..

详细代码：

    import {BindingSignaler} from 'aurelia-templating-resource'
    import * as vis from 'vis'
    import * as _ from loadash 

    export class GraphDisplay{
     @bindable data : any;
     private graph= vis.Graph2D;
     private container = HTMLElement;

     attached()
      {
         this.drawGraph();
      }

     activate()
      {
       this.drawGraph();
      }

     private drawGraph()
     {
        if(!this.data)
        {
          return;
        }


      var items = [
             {x: '2014-06-13', y: 30},
             {x: '2014-06-14', y: 10},
             {x: '2014-06-15', y: 15},
             {x: '2014-06-16', y: 30},
             {x: '2014-06-17', y: 10},
             {x: '2014-06-18', y: 15}
           ];

       var dataset = new vis.Dataset(items);

       var options= {
            start : '2014-06-11',
            end : '2014-06-16',
            graphHeight: '45px',
            dataAxis:{
               showMinorLabels:false,
               showMajorLabels:false,
               visible:false
               }
         }

       if(this.container)
         {
           this.graph = new vis.Graph2D(this.container, dataset, groups, options);
         }
     else
         {
           console.log('No container found');
         }

      }

   }

HTMLElement 通过视图中的 ref 属性绑定

        <template>
           <div class="containerClass" id="graphContainer" ref="container" style="height:200px; width:200px;">
        </template>

Answer 1

1) 要隐藏网格，请使用 CSS:

.vis-background {
  display: none;
}

2) 要隐藏时间轴，请将选项 showMajorLabels 和 showMinorLabels 移动到上层：

var options = {
  start: '2014-06-13 09:30',
  end: '2014-06-13 13:00',
  graphHeight: '45px',
  dataAxis: {
    visible: false
  },
  showMajorLabels: false,
  showMinorLabels: false
};

3) 可以在数据中指定分钟数：

var items = [{
    x: '2014-06-13 10:00',
    y: 30
  }, ...

完整示例：https://jsfiddle.net/atnnL13f/

Vis.js - 如何隐藏网格线

Vis.js - how to hide the gridlines

aurelia