Stackedbars Diagramm Überlappung in c3js während Zeitreihen mit

Question

ich ein Problem bin vor in c3js von overlaping während Typ als Zeitreihen mit

OUTPUT screenshot of Below code

die oben Bild unten gezeigt i-Code hinzufügen auch für Sie

Referenz

 var chart = c3.generate({ 
     bindto: '#chart', 
    data: { 
     //x : 'indicator', 
     xFormat: '%Y%m%d', 
     json: [ 
      { 'indicator': '20160101', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
      { 'indicator': '20160211', 'total': 200,'total2': 136 ,'total3': 50 }, 
      { 'indicator': '20150518', 'total': 300,'total2': 230 ,'total3': 60 }, 
      { 'indicator': '20160111', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
      { 'indicator': '20161212', 'total': 200,'total2': 136 ,'total3': 50 }, 
      { 'indicator': '20160528', 'total': 300,'total2': 230 ,'total3': 60 }, 
      { 'indicator': '20141101', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
      { 'indicator': '20161211', 'total': 200,'total2': 136 ,'total3': 50 }, 
      { 'indicator': '20160418', 'total': 300,'total2': 230 ,'total3': 60 } 
     ], 
     groups: [ 
      ['total','total2','total3'] 
     ], 
     keys: { 
      x: 'indicator', 
      value: ['total','total2','total3'] 
     }, 
     type: 'bar', 
     order: 'asc' 
    }, 
    zoom: { 
     enabled: true 
    }, 
    axis: { 
      x: { 
      // type: 'category', 
      type : 'timeseries', 
       tick: { 
       fit: true, 
       outer: false, 
      // format: function (x) { 
        // if (x.getDate() === 1) { 
        //  return x.toLocaleDateString(); 
        // } 
        //  } 
       format: function (x) { return x.getFullYear(); } 
     } 
    } 
    }, 
    bar: { 
     width: { 

      // 6 - items in dataset part of bar width calcuation 
      // 28 - items that should have been considered in dataset # of 
      //  months between start and end 
      // 0.6 - the default bar.with.ratio 
      // ratio: 6/28 * 0.6 
      ratio:0.5 
     } 
    } 
}); 

Können Sie bitte dabei helfen?

Vielen Dank im Voraus

Answer 1

Die Stäbe überlappen sich, zwei Ihrer Datenpunkte sind nur 1 Tag voneinander entfernt auf einer Domäne, die mehr als 2 Jahre abdeckt. Um diese 2 Überlappungen zu stoppen, müsste die Breite 1 Pixel auf einer 800 Pixel breiten Anzeige des Diagramms sein.

Die Alternativen sind: 1) Stellen Sie ein Liniendiagramm es (aber die Achsen Etiketten überlappen noch) - einfachste 2) Stellen Sie eine Kategorie Diagramm nicht Diagramm eine Zeitreihe es. Sie verlieren das Gefühl der Distanz zwischen den Daten, aber das ist, was Ihre Probleme in erster Linie verursacht

Sie werden Ihre Daten zuerst sortieren müssen, kann ich nicht c3 Befehl sehen Kategorien zu sortieren

var data = [ 
     { 'indicator': '20160101', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
     { 'indicator': '20160211', 'total': 200,'total2': 136 ,'total3': 50 }, 
     { 'indicator': '20150518', 'total': 300,'total2': 230 ,'total3': 60 }, 
     { 'indicator': '20160111', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
     { 'indicator': '20161212', 'total': 200,'total2': 136 ,'total3': 50 }, 
     { 'indicator': '20160528', 'total': 300,'total2': 230 ,'total3': 60 }, 
     { 'indicator': '20141101', 'total': 100 ,'total2': 130 ,'total3': 10 }, 
     { 'indicator': '20161211', 'total': 200,'total2': 136 ,'total3': 50 }, 
     { 'indicator': '20160418', 'total': 300,'total2': 230 ,'total3': 60 } 
    ]; 
    data.sort (function(a,b) { 
     if (a.indicator > b.indicator) return 1; 
     if (a.indicator < b.indicator) return -1; 
     return 0; 
    }) 

so wird json json: data und später in der Tabelle Deklaration Sie verwenden:

axis: { 
      x: { 
       type: 'category', 
       tick: { 
        // can change the formatting at this point 
        format: function(x) { return this.api.categories()[x]; } 
       } 
     } 
    }, 
    bar: { 
     width: { 
      ratio:0.8 
     } 
    }