Vis.js - как скрыть линии сетки - PullRequest
Новая
       8

Vis.js - как скрыть линии сетки

0 голосов
/ 01 мая 2018

Технические данные:

JS Framework: 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>

1 Ответ

0 голосов
/ 03 мая 2018

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/

...