Question

技术细节：

JS框架：Aurelia

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

我正在为基于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}
     ];

当我尝试更改＆＃34; x：＆＃34;值为其他东西（以显示我的情况下的时间），如

    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}
    ];

它扔了一个＆＃39; X是NaN＆＃39;错误.. 如何更改值...我已经看到了使用格式化程序的一些建议..

详细代码：

    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 - 如何隐藏网格线

1 个答案: