2016-12-19 1 views
0

Ich habe ein Liniendiagramm erstellt, um die letzten drei Monatsdaten anzuzeigen. Es funktioniert gut, außer es zeigen nur zwei Daten/Monate in X-Achse (erste und letzte). Die Beschriftung für den Mittelpunkt wird nicht angezeigt.Anzeige Monate in X-Achse Nvd3 Diagramm - odoo?

linechart.js

self.chart = nv.models.lineChart() 
      .margin({left:100,botoom:50,top:0}) 
      .useInteractiveGuideline(true) 
      .transitionDuration(350) 
      .showYAxis(true) 
      .showXAxis(true) 
      .showLegend(false) 
      .width(220) 
      .height(150) 

      self.chart.xAxis 
      .axisLabel('Month') 
      .tickFormat(function(d) { 

       return d3.time.format("%b-%Y")(new Date(d)); }) 

      self.chart.yAxis 
      .axisLabel(myData[0].ylabel) 
      .tickFormat(d3.format(',.1f')); 

      myData = self.data; 

Daten

[{ 'y': 7L, 'X': u'2016-10 '}, {' y ': 2L, 'x': u'2016-11 '}, {' y ': 6L, 'x': u'2016-12'}]

Bild

enter image description here

+0

Haben Sie 'xAxis.ticks (d3.time.months)' ausprobiert? – JulCh

+1

Ich denke, es ist wegen des verfügbaren Platzes. Können Sie die Breite des Diagramms vergrößern und überprüfen? 'nv.models.lineChart(). width (420)' – sandyJoshi

Antwort

0

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues

Sie benötigen tickvalues ​​für Ihre Achse oder d3 eingestellt wird sie für Sie generieren. Werfen Sie einen Blick auf das Snippet unten:

 chart.xAxis 
      .tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); }) 
      .tickValues(_.map(tick_values, function(d) { return getDate(d); })) 
      .rotateLabels(-30); 

wo tick_values ein Array ist. Weitere Informationen finden Sie in der oben genannten Dokumentation.

Verwandte Themen